JavaScript中获取鼠标位置相关属性总结

157 阅读 0 评论 104 点赞

我是靠谱客的博主笑点低宝马，最近开发中收集的这篇文章主要介绍JavaScript中获取鼠标位置相关属性总结，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

javascript并没有mouse对象，获取鼠标坐标要靠强大的event对象。

我们通过监听document的mousemove，就可以实时获得鼠标位置。

但是！！event中和鼠标相关的属性太多了，很让人头大！如下：

event.layerX	event.layerY
event.clientX	event.clientY
event.pageX	event.pageY
event.offsetX	event.offsetY
event.screenX	event.screenY
event.x	event.y

共计6组！

而且他们的区别并不明显，各浏览器间还不兼容！

这篇文章的目的就是搞清楚他们的区别，以及选出那些不推荐使用的。

测试代码

直接运行下列代码：

复制代码代码如下:

<!DOCTYPE html><br />

<html xmlns="http://www.w3.org/1999/xhtml"><br />

<head><br />

<meta charset="utf-8" /></p>

<style>

body {position:relative;}

 div {min-height: 300px; background-color: #eee;}

 #jg {right: 0; top: 10px; position: fixed; background-color: #f00;}

</style>

<p></head><br />

<body><br />

<span id="jg">显示结果</span><br />

<input type="button" value="一个按钮" /></p>

<div>屏内div</div>

<div style="height:1000px; width:2000px; background:#ddd;">很高很宽。。。</div>

<div>屏外DIV</div>

<p></body><br />

<script>

var jg = document.getElementById('jg');

document.onmousemove = function  (e) {

 e = e || window.event;

 jg.innerHTML = 'layerX:'+e.layerX+

     ',layerY:'+e.layerY+

     ', <br/>clientX:'+e.clientX+

     ',clientY:'+e.clientY+

     ', <br/>pageX:'+e.pageX+

     ',pageY :'+e.pageY+

     ',<br/>offsetX:'+e.offsetX+

     ',offsetY:'+e.offsetY+

     ',<br/>screenX:'+e.screenX+

     ',screenY:'+e.screenY+

     ',<br/>x:'+e.x+

     ',y:'+e.y;

}

</script><br />

</html>

测试过程中发现一个神器：chrome(谷歌浏览器)和IE9全兼容以上所有属性！用来比较他们就非常方便了。

经过对比，结果如下：

各属性释义

clientX与Y，是鼠标相对于浏览器视口（即滚动条之外的部分忽略掉）的坐标；所有浏览器都支持。

screenX与Y，是鼠标相对于整个屏幕左边（顶边）的坐标，基本与document脱节了；全兼容。

offsetX与Y，是鼠标相对于当前所指向对象的坐标，鼠标此时指向按钮，则offsetX是相对于这个按钮；firefox不支持

x与y，同标准浏览器的layerX与Y，是IE中可以用来代替layerX的属性

pageX与Y，是鼠标相对于整个页面左边（顶边）的坐标，包括视口之外的；IE7，8不支持。

重点：layerX与layerY

layerX与Y是标准浏览器出的新属性，IE9也支持。他可以用来代替offsetX与Y.但是，他的定义为：相对于当前指向元素最近的有定位信息的元素的坐标。这个“有定位”是指有非默认定位的css属性（即非static）。

如果，当前指向的元素就有定位，那么layerX与Y就返回相对于此元素的坐标；否则，就查看此元素的父标签；还是没有定位的话，就继续；一直到根元素——html节点。

所以，在firefox中，想要offsetX值，就必须加入position定位信息！

兼容性总结：

1，firefox不支持offsetX,offsetY与x,y属性，但完全可以用layerX代替他们；
2，ie中的x,y相当于firefox&chrome中的layerX与layerY；
3，ie7,8的document的边界与浏览器窗口的边界有2px的距离，所以在窗口最大化时screenX最小都有2px；
4，ie9中的layerX与Y，虽然有值，但却莫名其妙的不正确，貌似与html标签有关，比如我的例子的代码，把滚动条拖到最右边，鼠标从空白慢慢移动到大DIV上，此时大DIV的最右边与第一个DIV的最右边的差值也会算进layerX中。。。后头元素越来越多，这个计算就越复杂；而firefox与chrome的layerX则没有这个问题。所以，不要在IE9中使用layerX.
5,在chrome中，x与y虽然有值，但是是和clientX与Y完全相同！所以，不建议使用x,y属性。

兼容性补救

标准浏览器中可以用position与event.layerX配合来实现event.offsetX属性；

IE7，8中没有pageX,pageY,只有用document.documentElement.scrollLeft+event.clientX来求出。

所以，IE中的x,y或者offsetX,offsetY可以去掉一个了。