详细区分offsetX，clientX，pageX，screenX，layerX和X的区别

详细区分DOM事件中鼠标指针的坐标问题

前面博客中我们讲解到了DOM事件的event对象，里边包含了鼠标事件的指针坐标属性。比如event.offsetX,event.clientX,event.pageX,event.screenX等等。现在我们来解析一下这些坐标属性的区别。

HTML代码：

    <div class="box"></div><div class="box2"></div>

CSS代码：

    .box{width: 200px;height: 200px;background: red;margin: 200px auto;}.box2{width: 10000px;height: 100px;}body{height: 10000px;}

JavaScript代码：

    var oBox=document.getElementsByClassName("box")[0];oBox.onmousemove=function(ev){var ev=ev||window.event;console.log("clientX:"+ev.clientX,"clientY:"+ev.clientY);console.log("screenX:"+ev.screenX,"screenY:"+ev.screenY);console.log("offsetX:"+ev.offsetX,"offsetY:"+ev.offsetY);console.log("pageX:"+ev.pageX,"pageY:"+ev.pageY);}// clientX clientY  相对于可视区域的左上角// screenX screenY  相对于显示器屏幕左上角// offsetX offsetY  相对于触发事件的元素的左上角// pageX PageY   相对于整个网页的左上角   clientX+滚动条

图文解析event.offsetX,event.clientX,event.pageX,event.screenX的区别：

图解event.layerX,event.layerY属性：

图解event.x,event.y属性：

视频讲解链接：
https://www.bilibili.com/video/BV1Cg4y1i7sr/

详细区分offsetX，clientX，pageX，screenX，layerX和X的区别相关推荐

图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
通过 3 张图和 1 张表格,轻松区别 Javascript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性. 一.测试代码如下: & ...
Js event对象offsetX, clientX, pageX, screenX, layerX, x区别（图解）
简介因为实际开发中,很少用到event对象的这几个值,每当写的时候又记不清,然后就要浪费时间去查找准确的资料,很是不爽,所以就做个记录~话不多说,直接上图(ps:图是网上找的,如果侵权,可立马删除) ...
event对象的offsetX, clientX, pageX, screenX
现在需要对event对象的几大与坐标有关的属性做一个总结,以便于认识 offsetX|offsetY offsetX/Y获取到是触发点相对被触发dom的左上角距离(包括padding在内,不包括bor ...
html5 offsetx,event对象中offsetX,clientX,pageX,screenX的区别
1.offsetX offset意为偏移量,是事件对象距左上角为参考原点的距离.以元素盒子模型的内容区域的左上角为参考点.不包括border. 2.clientX 事件对象相对于浏览器窗口可视区域的X ...
一张图看懂offsetX, clientX, pageX, screenX的区别
1.具体含义见下图1 2.浏览器的兼任情况更多专业前端知识,请上 [猿2048]www.mk2048.com
clientX,pageX,screenX，offsetLeft，scrollTop
这个东西,以为理解了,今天彻底弄弄. clientX 观点:鼠标相对于WINDOWS的坐标. 这里这个WINDOWS是指我们能看见的浏览器大小.所以不可能超过显示器的大小,如 screen.width ...
[js] 事件对象 e.target offsetX clientX pageX
鼠标相关事件 e.target 触发事件的标签对象 - e.target.innerText:点击标签的本文内容- e.target.tagName :点击标签的标签名称,标签名称是大写字符- e.t ...
pageX、clientX、screenX、offsetX、layerX、x
参考:http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.html chrome: e.pageX--相对整个页面的坐标 e.layerX- ...
PageX、clientX、screenX、offsetX、layerX的区别
一.PageX和clientX PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是 ...

详细区分offsetX，clientX，pageX，screenX，layerX和X的区别

详细区分DOM事件中鼠标指针的坐标问题

详细区分offsetX，clientX，pageX，screenX，layerX和X的区别相关推荐

最新文章

热门文章