javascript获取鼠标的位置

最新推荐文章于 2025-12-27 19:25:02 发布

原创最新推荐文章于 2025-12-27 19:25:02 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #function

本文介绍了一种使用JavaScript获取鼠标位置的方法。通过监听鼠标移动事件并利用pageX/pageY属性或者clientX/clientY属性结合滚动条的位置来确定鼠标在页面上的坐标。此技术适用于网页互动效果开发。

页面构造

var ev;
    function mouseLocale(ev){
      ev = ev || window.event;
      var mouseXY = getLocale(ev);
      document.getElementById("x").value = mouseXY.x;
      document.getElementById("y").value = mouseXY.y;
    }

    function getLocale(ev){
      if(ev.pageX || ev.pageY){
       return {x:ev.pageX, y:ev.pageY};
   }
      return {
      //clientX游览器页面的水平位置
      //document.body.scrollLeft滚动条的左位置
      //document.body.clientLeft返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离
      x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
      y:ev.clientY + document.body.scrollTop - document.body.clientTop
      };
    }
    document.onmousemove = mouseLocale;