鼠标点击位置坐标获取做一些简单的总结【我爱写游记】

在一些DOM操作中，我们经常会处理元素的位置。鼠标交互是一个经常使用的方面。令人失望的是，不同的浏览器甚至某些浏览器会有不同的结果。因此，本文对鼠标点击位置坐标的获取做了一些简单的总结。

要获取鼠标位置，首先要了解什么是事件。事件是一个声明全局变量的对象。可以在Chrome和IE下随意访问。有好奇心的请看console.log事件。但！ ！ ！ Firefox 下没有事件对象！ ！好消息是：在 IE8、chrome 中，有一个事件对象！鼠标点击位置坐标相对于屏幕

如果涉及鼠标点击的位置判断比较简单，获取鼠标点击事件后，事件screenX,screenY获取相对于屏幕左上边距的点击位置，不考虑iframe因素, 不同浏览器下性能相当一致。

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

相对于浏览器窗口

简单的代码就可以实现，但这还不够，因为在大多数情况下，我们想要获取鼠标点击位置相对于浏览器窗口的坐标。事件的 clientX 和 clientY 属性表示鼠标单击相对于文档的位置。左边距，上边距。

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

相对于文档

clientX 和 clientY 是获取相对于当前屏幕的坐标，忽略页面滚动因子，这在很多环境下很有用，但是当我们需要考虑页面滚动时，即相对于文档（body 元素）坐标怎么办？只需添加滚动的位移即可。

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 };
}

转载地址：

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-380115-1.html