使用js显示光标位置

小灿同学+1

已于 2023-09-05 14:04:49 修改

阅读量150

点赞数 1

文章标签： javascript 前端

于 2023-09-02 16:48:51 首次发布

本文链接：https://blog.csdn.net/xiaocantongxue/article/details/132640066

版权

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #content {
        width: 400px;
        height: 400px;
        background-color: green;
        position: relative;
      }
      #box {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        left: 200px;
        top: 200px;
      }
    </style>
  </head>
  <body>
    <div id="content">
      <div id="box"></div>
    </div>
    <div id="show"></div>

    <script>
      //1.获取所有的元素
      var contentDiv = document.querySelector('#content');
      var showDiv = document.querySelector('#show');
      //2.给外面的绿色区域添加点击事件
      contentDiv.onmousemove = function (evt) {
        console.log(evt.target);
        //3.获取坐标
        var str = evt.offsetX + ',' + evt.offsetY;
        //4.将获取到的坐标赋值给show区域
        showDiv.innerHTML = str;
      };
    </script>
  </body>

关注博主即可阅读全文