摘要：入门系列之位置及相对位置事件坐标写过代码的一般都知道，在页面操作中，坐标概念是一个很重要的概念，几乎所有的页面交互都牵扯到坐标的概念。，及表示的是事件触发点相对于事件发生所在节点左上角的位置。我们可以通过获取到元素相对于文档的位置信息。
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。你，值得拥有~好了，本期位置坐标概念介绍到这里，同学们下课！下期再见~
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/107317.html
摘要：入门系列之位置及相对位置事件坐标对象在写前端页面的时候，我们会碰到不同浏览器下不同逻辑的情况。指明系统是否处于脱机模式的布尔值。运行浏览器的操作系统平台。由客户机发送服务器的头部的值。 js入门系列之 位置及相对位置事件坐标 Navigator对象在写前端页面的时候，我们会碰到不同浏览器下不同逻辑的情况。这个时候我们就有必要通过js代码来确认当前浏览器的种类以及版本，这个时候我们...
摘要：如果你嫌上面太琐碎，可以直接取看我的试验源码，文件是欢迎本文后续从开始撸一个支持单轴轮播的雷达图之末篇本文首发于 在线示例如果你还不了解canvas，还不知道要讲啥，建议从首篇看起：从0开始写一个支持单轴轮播的雷达图在首篇我们已经讲了怎么实现轮播，在这里我们将要用这一篇文章来说一下雷达图的单轴hover效果的实现，也是我写这篇文章的原因，因为echarts只支持单个series的hov...
摘要：绑定及解绑事件事件绑定的三种方式事件类型，命名函数，布尔值不支持代表的是当前绑定事件的对象事件类型，函数名字，移除事件注意中的第三个参数设置为就在捕获过程中执行，反之就在冒泡过程中执行处理函数。 JS 绑定及解绑事件 事件绑定的三种方式 .addEventListener(事件类型，命名函数，布尔值) //IE8不支持 (this代表的是当前绑定事件的对象) ...
阅读 3388·2021-11-24 09:38
阅读 1387·2021-11-22 15:08
阅读 1456·2021-09-29 09:35
阅读 478·2021-09-02 15:11
阅读 1306·2019-08-30 12:55
阅读 387·2019-08-29 17:16
阅读 493·2019-08-29 11:30
阅读 417·2019-08-26 13:23
