js入门系列位置与相对位置事件坐标写过代码的一般都知道坐标的概念是页面操作中非常重要的一个概念。几乎所有的Page交互都涉及到坐标的概念。特别是在游戏中，坐标的概念是制作游戏最基本的概念之一。如果你不懂或者不懂坐标的概念，那么辛苦的游戏可能就变成了动画。在写js的时候，清楚地理解和区分坐标的概念，尤其是js事件中的各种坐标，是非常重要的。我们举个例子来理解：如图所示，我们监听点击testDiv和点击文档的事件，我们可以在控制台观察输出的事件信息。在chrome浏览器下，打印的事件信息中至少有6条坐标信息。接下来详细说一下各个坐标信息的意义和应用，做一个完整的位置信息文档~clientX,clienYclientX,clientY代表事件触发点相对于左上角在可见区域的位置浏览器。layerX、layerYlayerX、layerY表示事件触发点相对于事件发生的dom节点左上角的位置。offsetX、offsetY与layerX、layerY类似，同样表示事件触发点相对于事件发生的dom节点左上角的位置。pageX、pageYpageX、pageY表示事件触发点相对于整个文档左上角的位置，考虑到你的滚动距离。screenX,screenYscreenX和screenY代表的事件触发点是基于整个屏幕，相对于屏幕左上角的相对位置。x,yx,y类似于pageX和pageY，同样代表事件触发点相对于文档左上角的位置。我们用几张图来直观地标出这些坐标所代表的位置信息：然而，并不是所有的浏览器都能提供所有的坐标信息，例如FireFox中就没有x和y的概念。下图说明了各种浏览器对不同坐标信息的兼容性。在选择坐标时，不仅要选择正确的坐标，还要考虑在不同浏览器下的兼容性。好了，事件坐标的概念已经解释到这里了。相信大家都明白了。再来说说js中的元素坐标。元素坐标styledocument.getElementById('id').style.width=valuedocument.getElementById('id').style.height=valuedocument.getElementById('id').style.top=valuedocument.getElementById('id').style.left=value在js中我们可以通过style来设置元素的位置和宽高信息。值得注意的是，在IE浏览器中，我们在设置value的时候，value可以是一个数字，比如document.getElementById('id').style.left=100但是在其他浏览器中，value的值必须是一个字符串，例如document.getElementById('id').style.left="100px"offsetvalue=document.getElementById('id').offsetLeftvalue=document.getElementById('id').offsetTopvalue=document.getElementById('id').offsetWidthvalue=document.getElementById('id').offsetHeight既然在js中可以设置值，那么我们也可以在js中获取值。我们可以通过offset获取元素相对于文档的位置信息。元素信息很多，这里就不一一介绍了。有兴趣的同学自己去了解一下。事件坐标和元素坐标的联合使用了解了事件坐标和元素坐标之后，我们就可以在页面之间做一些精准的交互了。用过canvas的同学都知道，canvas是h5强大的新元素之一，有望取代flash的存在。许多网页使用画布制作有趣的游戏。但是画布有一点不太好。画布内部绘制的图形是没有元素概念的，也就是说我们无法通过监听画布内部的元素来进行交互。但是我们可以通过精确的坐标变换来达到我们想要的效果。下面我们来做一个点击画布中的矩形，在页面中弹出hello的效果：哈哈，这就是最简单的页面交互了吧？有了canvas，你可以获得很多炫酷的效果~canvas的出现让前端的动画有了很大的提升，这也是我非常喜欢canvas的原因之一~顺便给大家推荐两个canvas库、fabric.js和konva.js。你值得拥有~好了，本期位置坐标概念介绍到此结束，同学们下课啦！下次见~
