javascript怎么获取指针的位置

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

本文操作环境：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>
    

演示效果如下：

获取指针的相对位置

使用 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 像素的默认宽度，为获取元素的边框实际宽度带来了麻烦。需要设置更多的条件，来判断当前元素的边框宽度。

示例

完善后的获取鼠标指针在元素内的位置扩展函数如下：

//完善获取鼠标指针在元素内的位置//参数：e表示当前事件对象，o表示当前元素//返回值：返回鼠标相对元素的坐标位置，其中x表示x轴偏移距离，y表示y轴偏移距离function getME(e, o){
        var e = e || window.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     }
   }
    

演示效果如下：

推荐学习：javascript视频教程

以上就是javascript怎么获取指针的位置的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！