html获取鼠标的当前位置

最新推荐文章于 2024-06-15 19:18:00 发布

闲人不梦卿

最新推荐文章于 2024-06-15 19:18:00 发布

阅读量6.3k

点赞数 3

分类专栏： html

本文链接：https://blog.csdn.net/atu1111/article/details/108033100

版权

html 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

html获取鼠标的当前位置

1.相对于屏幕

如果是涉及到鼠标点击确定位置相对比较简单，获取到鼠标点击事件后，事件screenX，screenY获取的是点击位置相对于屏幕的左边距与上边距，不考虑iframe因素，不同游览器下表现的还算一致。

function getMousePos(event) {
      var e = event || window.event;
      return {'x':e.screenX,'y':screenY}
}

2.相对于游览器窗口

简单代码即可实现，然而这时还不够，因为绝大多数情况下我们希望获取鼠标点击位置相对于游览器窗口的坐标，event的clientX，clientY属性分别表示鼠标点击位置相对于文档的左边距，上边距。

function getMousePos(event) {
      var e = event || window.event;
      return {'x':e.clientX,'y':clientY}
}

3.页面滚动

clientX与clientY是获取相对于当前屏幕的坐标，忽略了页面滚动因素，这在很多环境下很有用，但当我们需要考虑页面滚动，也就是相对于文档（body元素）的坐标时怎么办呢？只要加上滚动的位移就可以了。

在chrome可以通过document.body.scrollLeft，document.body.scrollTop计算出页面滚动位移，而在IE下可以通过document.documentElement.scrollLeft，document.documentElement.scrollTop

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
          .centerClass
          {
              position: absolute;
              top: 50%;
              left: 50%;
          }
    </style>
</head>
<body>
    <div class="centerClass">
        鼠标x位置:
        <input type="text" id="x"></input>
        <br>
        鼠标y位置:
        <input type="text" id="y"></input>
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div>1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
    <script>
   
         document.onmousemove = mouseMove;
         
        function mouseMove(event)
        {
              var e = event || window.event;
              var scrollx = document.documentElement.scrollLeft || document.body.scrollTop;
              var scrolly= document.documentElement.scrollTop || document.body.scrollTop;
              var x = e.pageX || e.clientX + scrollx;
              var y = e.pageY || e.clientY + scrolly;
              document.getElementById("x").value = x;
              document.getElementById("y").value = y;
              console.log(x);
              console.log(y);
   
        }
 
    </script>
</body>
</html>

展示效果：
在这里插入图片描述

闲人不梦卿

关注

3
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
html获取鼠标的当前位置

html获取鼠标的当前位置1.相对于屏幕如果是涉及到鼠标点击确定位置相对比较简单，获取到鼠标点击事件后，事件screenX，screenY获取的是点击位置相对于屏幕的左边距与上边距，不考虑iframe因素，不同游览器下表现的还算一致。function getMousePos(event) { var e = event || window.event; return {'x':e.screenX,'y':screenY}}2.相对于游览器窗口简单代码即可实现，然而这时还
复制链接

扫一扫