JS实时获取鼠标坐标

最新推荐文章于 2021-10-25 17:53:25 发布

逸川先生

最新推荐文章于 2021-10-25 17:53:25 发布

阅读量2.3k

点赞数 2

文章标签： JS 练习获取鼠标坐标

本文链接：https://blog.csdn.net/qq_38238041/article/details/86777333

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

简单练习，先上图

非常简单，只是一个onmousemove事件的处理

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>实时获取鼠标坐标</title>
  <style>
    .area{
      width: 500px;
      height: 350px;
      border: 2px solid royalblue;
    }
  </style>
  <script>
    window.onload = function(){
      document.getElementById('area').onmousemove = function (event) {
        /*if(!event){
          // 这是为了兼容IE8及以下版本
          event = window.event;
        }*/
        // 简写方式
        event = event || window.event;
        document.getElementById('val').innerHTML = '当前位置: ' + event.clientX + ", " + event.clientY;
      }
    };
  </script>
</head>
<body>
  <div class="area" id="area"></div>
  <span class="val" id="val"></span>
</body>
</html>

逸川先生

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS实时获取鼠标坐标

简单练习，先上图非常简单，只是一个onmousemove事件的处理&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;实时获取鼠标坐标&lt;/title&gt; &lt;style&
复制链接

扫一扫

专栏目录