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可以去掉一个了。
-
问题内容： 我正在尝试使用Jinput打印出鼠标位置： 这是我的InputManager，它在初始化时扫描所有输入设备，并将所有鼠标分离到单独的列表中： x和y的打印信息始终为0。我在Windows 10上运行此程序，是否会引起任何问题？如何使用Jinput从鼠标获取鼠标数据？ 问题答案： JInput处于较低级别，您正在混淆窗口指针和鼠标。鼠标只是相对轴> 2的设备。每次轮询后或在每个事件中的值
-
问题内容： 我想在Java中模拟鼠标的自然运动（从此处逐像素移动）。为此，我需要知道起始坐标。 我找到了方法event.getX（）和event.getY（），但是我需要一个事件… 我如何不做任何事情（或看不见的事情）就知道职位？ 谢谢 问题答案： MouseInfo.getPointerInfo（）。getLocation（）可能会有所帮助。它返回与当前鼠标位置相对应的Point对象。
-
问题内容： 我希望每t毫秒定期跟踪一次鼠标光标的位置。因此，从本质上讲，当页面加载时- 该跟踪器应该启动，并且每（例如）每100毫秒启动一次，我应该获取posX和posY的新值并以表格形式打印出来。 我尝试了以下代码-但值没有刷新-表单框中仅显示posX和posY的初始值。关于如何启动和运行它的任何想法？ 问题答案： 在事件处理程序接收到的对象上报告鼠标的位置，您可以将其附加到窗口（事件冒泡）：
-
本文向大家介绍Javascript 获取鼠标当前的位置实现方法，包括了Javascript 获取鼠标当前的位置实现方法的使用技巧和注意事项，需要的朋友参考一下 有时候，我们需要得到窗口拖动或者鼠标移动的距离，此时可以通过计算鼠标前后在页面中的位置来得到想要的结果，下面介绍几个事件属性: 1、客户区坐标位置 鼠标事件都是在浏览器视口中的特定位置上发生的。这个位置信息保存在事件对象的 client
-
本文向大家介绍js获取鼠标位置实例详解，包括了js获取鼠标位置实例详解的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js获取鼠标位置的方法。分享给大家供大家参考，具体如下： 用 javascript 获取当前页面上鼠标（光标）位置在许多情况下都会用到，比如拖放，悬停提示（tooltip） 等等。当然，这里我们依然要面对浏览器的兼容问题，在不同的浏览器下，对这些相关的属性处理方式也不同，这
-
问题内容： 有没有一种方法可以将位置鼠标插入标签？我想要相对于而不是整个页面右上角的位置。 问题答案： 最简单的方法可能是向canvas元素添加onmousemove事件侦听器，然后您可以从事件本身获取相对于画布的坐标。 如果您只需要支持特定的浏览器，则完成此任务很简单，但是f.ex之间存在差异。Opera和Firefox。 像这样的东西应该适用于这两个：