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>

演示效果如下:

本文标题:JS获取鼠标指针的位置(坐标)

本文地址:https://www.hosteonscn.com/7095.html

评论

0条评论

发表评论

邮箱地址不会被公开。 必填项已用*标注