js笔记系列之--位置及相对位置事件坐标

js入门系列之

位置及相对位置事件坐标

---

写过代码的通常都知道，在页面操做中，坐标概念是一个很重要的概念，几乎全部的页面交互都牵扯到坐标的概念。尤为是在游戏中， 坐标概念更是制做游戏的最基本概念之中，不了解或者不清楚坐标概念，那么辛辛苦苦作的游戏可能沦为一个动画。对于在写js的时候，清晰地了解并能区分坐标概念是一件很重要的事，尤为是在js事件中的多种坐标。下面咱们举个例子来了解一下:

如图所示，咱们监听点击testDiv与点击文档的事件，咱们能够在控制台观察输出的event信息。

在chrome浏览器下，所打印出的event信息中至少有6中关于坐标的信息，下面咱们就仔细来谈谈各个坐标信息的含义以及应用场合，作一个完整的位置信息文档~

• clientX，clienY
  clientX以及clientY表示的是事件触发点在浏览器可见区域中相对于左上角的位置。
• layerX，layerY
  layerX及layerY表示的是事件触发点相对于事件发生所在dom节点左上角的位置。
• offsetX,offsetY
  与layerX、layerY类似，一样表示的是事件触发点相对于事件发生所在dom节点左上角的位置。
• pageX,pageY
  pageX和pageY表示的是事件触发点基于整个文档左上角的相对位置，它是把你滚动的距离计算在内的。
• screenX，screenY
  screenX和screenY表示的事件触发点基于整个屏幕，相对于屏幕左上角的相对位置。
• x，y
  x、y与pageX、pageY类似，表示的一样是事件触发点相对于文档左上角的位置。

来，咱们用几张图来形象的标示这些坐标所表明的位置信息：

然而并非全部浏览器都能提供全部坐标信息，例如x、y的概念在FireFox中是没有的。下图中说明了各类浏览器对于不一样坐标信息的兼容状况，咱们在选用坐标的时候不单单要选用正确的坐标，还要考虑在不一样浏览器下的兼容。

好了，对事件坐标的概念解释到这，相信你们都已经理解了，下面咱们来说讲js中的元素坐标。

元素坐标

style
document.getElementById('id').style.width=value
document.getElementById('id').style.height=value
document.getElementById('id').style.top=value
document.getElementById('id').style.left=value

在js中，咱们能够经过style去设置元素的位置以及宽高信息。值得注意的是，在IE浏览器中，咱们设置值得时候，value能够为数字，如
document.getElementById('id').style.left=100
可是在其余浏览器中，value的值必须为字符串，如
document.getElementById('id').style.left=“100px”
offset
value=document.getElementById('id').offsetLeft
value=document.getElementById('id').offsetTop
value=document.getElementById('id').offsetWidth
value=document.getElementById('id').offsetHeight

既然能够在js中设值，咱们一样也能够在js中取值。咱们能够经过offset获取到元素相对于文档的位置信息。元素信息还有不少，小编在这就不一一介绍了，同窗们有兴趣本身去了解一下。

事件坐标与元素坐标联用
在了解了事件坐标与元素坐标以后，咱们就能够作一些精准的页面间的交互了。用过canvas的同窗们都知道，canvas是h5强大的新元素之一，是有但愿取代flash的存在，很多网页都采用canvas去作好玩的游戏。可是canvas有一点不是很好，canvas内部所绘制的图形是没有元素概念的，也就是说咱们没法经过监听canvas内部元素来作到交互。可是，咱们能够经过精确的坐标转换来达到咱们想要的效果。如今咱们来作一个点击canvas中矩形而后页面中弹出hello的效果：

哈哈，这就是最简单的一个页面交互了不是嘛？配合canvas能够获得许多炫酷的效果噢~canvas的出现让前端在动画方面有了十分明显的改善，这也是我十分钟爱canvas的缘由之一~顺便给你们推荐两个canvas库，fabric.js以及konva.js。你，值得拥有~好了，本期位置坐标概念介绍到这里，同窗们下课！下期再见~