JS基本篇--相识JS的clientX、pageX、screenX等方法来猎取鼠标坐标详解

2019年8月26日 244次阅读 来源: 风雨后见彩虹

在一些DOM操纵中我们常常会跟元素的位置打交道，鼠标交互式一个常常用到的方面，使人扫兴的是差别的浏览器下会有差别的效果以至是有的浏览器下没效果，这篇文章就上鼠标点击位置坐标猎取做一些简朴的总结，没特别声明代码在IE8，FireFox，Chrome下举行测试兼容

要领引见

关于js鼠标事宜综合各大浏览器能猎取到坐标的属性统共以下五种：

  • event.clientX/Y
  • event.pageX/Y
  • event.offsetX/Y
  • event.layerX/Y
  • event.screenX/Y

clientX/Y

clientX/Y猎取到的是触发点相对浏览器可视地区左上角间隔，不随页面转动而转变。
兼容性：一切浏览器均支撑

pageX/Y

pageX/Y猎取到的是触发点相对文档地区左上角间隔，会跟着页面转动而转变
兼容性：除IE6/7/8不支撑外，其他浏览器均支撑

offsetX/Y

offsetX/Y猎取到是触发点相对被触发dom的左上角间隔，不过左上角基准点在差别浏览器中有区分，个中在IE中以内容区左上角为基准点不包括边框，假如触发点在边框上会返回负值，而chrome中以边框左上角为基准点。

兼容性：IE一切版本，chrome，Safari均圆满支撑，Firefox不支撑

layerX/Y

layerX/Y猎取到的是触发点相对被触发dom左上角的间隔，数值与offsetX/Y雷同，这个变量就是firefox用来替换offsetX/Y的，基准点为边框左上角，然则有个前提就是，被触发的dom须要设置为position:relative或许position:absolute，否则会返回相对html文档地区左上角的间隔。

兼容性：IE6/7/8不支撑，opera不支撑，IE9/10和Chrome、Safari均支撑

screenX/Y

screenX/Y猎取到的是触发点相对显示器屏幕左上角的间隔，不随页面转动而转变。
兼容性：一切浏览器均支撑

一张图来诠释，如图所示：
《JS基本篇--相识JS的clientX、pageX、screenX等方法来猎取鼠标坐标详解》

鼠标点击位置坐标

相对于屏幕

假如是涉及到鼠标点击肯定位置相对比较简朴，猎取到鼠标点击事宜后，事宜screenX，screenY猎取的是点击位置相对于屏幕的左侧距与上边距，不斟酌iframe要素，差别浏览器下表现的还算一致。

function getMousePos(event) {
    var e = event || window.event;
    return {'x':e.screenX,'y':screenY}
}

相对浏览器窗口

简朴代码即可完成，然则这是还不够，由于绝大多数情况下我们愿望猎取鼠标点击位置相对于浏览器窗口的坐标，event的clientX，clientY属性离别示意鼠标点击位置相对于文档的左侧距，上边距。因而相似的我们写出了如许的代码

function getMousePos(event) {
    var e = event || window.event;
    return {'x':e.clientX,'y':clientY}
}

相对文档

简朴测试也没什么题目，然则clientX与clientY猎取的是相对于当前屏幕的坐标，疏忽页面转动要素，这在许多前提下很有效，但当我们须要斟酌页面转动，也就是相对于文档（body元素）的坐标时怎样办呢？加上转动的位移就能够了，下边我们尝尝怎样盘算页面转动的位移。

其实在Firefox下题目会简朴许多，由于Firefox支撑属性pageX,与pageY属性，这两个属性已把页面转动盘算在内了。

在Chrome能够经由过程document.body.scrollLeft，document.body.scrollTop盘算出页面转动位移，而在IE下能够经由过程document.documentElement.scrollLeft ，document.documentElement.scrollTop

function getMousePos(event) {
    var e = event || window.event;
    var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
    var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
    var x = e.pageX || e.clientX + scrollX;
    var y = e.pageY || e.clientY + scrollY;
    //alert('x: ' + x + '\ny: ' + y);
    return { 'x': x, 'y': y };
}
    原文作者：风雨后见彩虹
    原文地址: https://segmentfault.com/a/1190000002405897
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞