鼠标指针定位screenX,clientX,pageX,layerX，offsetX
鼠标指针的定位对执行动态的效果来说是十分重要的，而各浏览器对此的解析和执行各有各的风格。今天，我给大家分享一下，它们的区别。 screenX,clientX,pageX,offsetX,layerX都是鼠标指针的位置，而不是元素的位置。
screenX： 以计算机显示屏左上角为原点(兼容各大浏览器)
clientX： 以浏览器窗口左上角为原点(兼容各大浏览器)，所以当你滑动条移动的时候，它将改变。
pageX： 以文档窗口左上角为原点，也就是以页面的左上角为原点，所以它的位置是不会随着滑动条的改变而改变的但是这个属性是FF特有的属性，ie并没有此属性。但是，我们可以通过pageX=clientX+scrollLeft-clientleft 来获得一样的效果。这里解释一下这段代码的意思:clientX(如上所说以浏览器窗口左上角为原点)+scrollLeft(页面向左滚动的距离)-clientleft (边框的厚度);
layerX： 这个也是FF特有属性，以触发元素最近的设置了absolute或relative的父亲元素左上角为原点(包含border边框)，如果没有，就以文档窗口左上角为原点。
offsetX： 这个属性不兼容Firefox，以触发元素(当前事件的目标对象)左上角(内容的左上角不包括border)为原点。
附加： 因为各大厂商解析时候的不同，使我们使用起来不是那么方便。为了使我们使用方便，我们可以定义一个事件对象标准画函数- function e(event){ //event为事件
- if(!event){ //IE
- event=window.event;
- event.target=event.srcElement;
- event.layerX=event.offsetX;
- event.layerY=event.offsetY;
- }
- event.pageX=event.pageX||event.clientX+document.body.scrollLeft;
- event.pageY=event.pageY||event.clientY+document.body.scrollTop;
- }
来源：前端网
正文到此结束
热门推荐
相关文章
近期评论
-
666
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
