返回
主机教程
-
JS获取鼠标指针的位置（坐标）
本示例讲解 JavaScript 获取指针的页面位置和相对位置。
获取指针的页面位置
使用事件对象的 pageX 和 pageY（兼容 Safari），或者 clientX 和 clientY（兼容 IE）属性，同时还需要配合 scrollLeft 和 scrollTop 属性，就可以计算出鼠标指针在页面中的位置。
//获取鼠标指针的页面位置 //参数：e表示当前事件对象 //返回值：返回鼠标相对页面的坐标，对象格式（x，y） function getMP (e) { var e = e || window.event; return { x : e.pageX || e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft), y : e.pageY || e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) } }pageX 和 pageY 事件属性不被 IE 浏览器支持，而 clientX 和 clientY 事件属性又不被 Safari 浏览器支持，因此可以混合使用它们以兼容不同浏览器。对于怪异模式来说，body 元素代表页面区域，而 html 元素被隐藏，但是标准模式以 html 元素代表页面区域，而 body 元素仅是一个独立的页面元素，所以需要兼容这两种解析方式。
下面示例演示了如何调用上面扩展函数 getMP() 捕获当前鼠标指针在文档中的位置。
<body style="width:2000px;height:2000px;"> <textarea id="t" cols="15" rows="4" style="position:fixed;left:50px;top:50px;"></textarea> </body> <script> var t = document.getElementById("t"); document.onmousemove = function(e){ var m = getMP(e); t.value ="mouseX = " + m.x + "\n" + "mouseY = " + m.y } </script>演示效果如下：
