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。你，值得拥有~好了，本期位置坐标概念介绍到这里，同学们下课！下期再见~