站长资讯网
最全最丰富的资讯网站

javascript怎么获取指针的位置

javascript获取指针的位置的方法:使用事件对象的pageX和pageY,或者clientX和clientY属性,并且配合scrollLeft和scrollTop属性,这样就可以计算出指针的位置了。

javascript怎么获取指针的位置

本文操作环境:windows10系统、javascript 1.8.5、thinkpad t480电脑。

要想获取指针在页面中的位置,可以使用事件对象的pageX和pageY,或者是 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>

演示效果如下:

javascript怎么获取指针的位置

获取指针的相对位置

使用 offsetX 和 offsetY 或者 layerX 和 layerY 可以获取鼠标指针相对定位包含框的偏移位置。如果使用 offsetLeft 和 offsetTop 属性获取元素在定位包含框中的偏移坐标,然后使用 layerx 属性值减去 offsetLeft 属性值,使用 layery 属性值减去 offsetTop 属性值,即可得到鼠标指针在元素内部的位置。

//获取鼠标指针在元素内的位置 //参数:e表示当前事件对象,o表示当前元素 //返回值:返回相对坐标对象 function getME (e, o) {     var e = e || window.event;     return {         x : e.offsetX || (e.layerX - o.offsetLeft),         y : e.offsetY || (e.layerY - o.offsetTop)     } }

在实践中上面函数存在以下两个问题:

  • Mozilla 类型和 Safari 浏览器以元素边框外壁的左上角为参照点。

  • 其他浏览器则是以元素边框内壁的左上角为坐标原点。

考虑到边框对鼠标位置的影响,当元素边框很宽时,必须考虑如何消除边框对于鼠标位置的影响。但是,由于边框样式不同,它存在 3 像素的默认宽度,为获取元素的边框实际宽度带来了麻烦。需要设置

赞(0)
分享到: 更多 (0)