JavaScript 如何获取鼠标指针的位置 (坐标)? 下面本篇文章给大家介绍一下 JavaScript 获取指针的页面位置和相对位置. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
获取指针的页面位置
使用事件对象的 pageX 和 pageY(兼容 Safari), 或者 clientX 和 clientY(兼容 IE) 属性, 同时还需要配合 scrollLeft 和 scrollTop 属性, 就可以计算出鼠标指针在页面中的位置.
- // 获取鼠标指针的页面位置
- // 参数: e 表示当前事件对象
- // 返回值: 返回鼠标相对页面的坐标, 对象格式 (x,y)
- function getMP (e) {
- var e = e || Windows.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>
演示效果如下:
获取指针的相对位置
使用 offsetX 和 offsetY 或者 layerX 和 layerY 可以获取鼠标指针相对定位包含框的偏移位置. 如果使用 offsetLeft 和 offsetTop 属性获取元素在定位包含框中的偏移坐标, 然后使用 layerx 属性值减去 offsetLeft 属性值, 使用 layery 属性值减去 offsetTop 属性值, 即可得到鼠标指针在元素内部的位置.
- // 获取鼠标指针在元素内的位置
- // 参数: e 表示当前事件对象, o 表示当前元素
- // 返回值: 返回相对坐标对象
- function getME (e, o) {
- var e = e || Windows.event;
- return {
- x : e.offsetX || (e.layerX - o.offsetLeft),
- y : e.offsetY || (e.layerY - o.offsetTop)
- }
- }
在实践中上面函数存在以下两个问题:
Mozilla 类型和 Safari 浏览器以元素边框外壁的左上角为参照点.
其他浏览器则是以元素边框内壁的左上角为坐标原点.
考虑到边框对鼠标位置的影响, 当元素边框很宽时, 必须考虑如何消除边框对于鼠标位置的影响. 但是, 由于边框样式不同, 它存在 3 像素的默认宽度, 为获取元素的边框实际宽度带来了麻烦. 需要设置更多的条件, 来判断当前元素的边框宽度.
示例
完善后的获取鼠标指针在元素内的位置扩展函数如下:
- // 完善获取鼠标指针在元素内的位置
- // 参数: e 表示当前事件对象, o 表示当前元素
- // 返回值: 返回鼠标相对元素的坐标位置, 其中 x 表示 x 轴偏移距离, y 表示 y 轴偏移距离
- function getME(e, o){
- var e = e || Windows.event;
- // 获取元素左侧边框的宽度
- // 调用 getStyle() 扩展函数获取边框样式值, 并尝试转换为数值, 如果转换成功, 则赋值.
- // 否则判断是否定义了边框样式, 如果定义边框样式, 且值不为 none, 则说明边框宽度为默认值, 即为 3 像素.
- // 如果没有定义边框样式, 且宽度值为 auto, 则说明边框宽度为 0
- var bl = parseInt(getStyle(o, "borderLeftWidth")) || ((o.style.borderLeftStyle &&
- o.style.borderLeftStyle != "none" )? 3 : 0);
- // 获取元素顶部边框的宽度, 设计思路与获取左侧边框方法相同
- var bt = parseInt(getStyle(o, "borderTopWidth")) || ((o.style.borderTopStyle &&
- o.style.borderTopStyle !="none" ) ? 3 : 0);
- var x = e.offsetX || (e.layerX - o.offsetLeft - bl); // 一般浏览器下鼠标偏移值
- // 兼容 Mozilla 类型浏览器, 减去边框宽度
- var y = e.offsetY || (e.layerY - o.offsetTop - bt); // 一般浏览器下鼠标偏移值
- // 兼容 Mozilla 类型浏览器, 减去边框宽度
- var u = navigator.userAgent; // 获取浏览器的用户数据
- if( (u.indexOf("KHTML")> - 1) ||(u.indexOf("Konqueror")> - 1)
- || (u.indexOf("ApplewebKit")> - 1)
- ){ // 如果是 Safari 浏览器, 则减去边框的影响
- x -= bl; y -= bt;
- } return { // 返回兼容不同浏览器的鼠标位置对象, 以元素边框内壁左上角为定位原点
- x : x, y : y
- }
- }
演示效果如图所示:
更多 Web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/web/javascript/17559.html