简单练习,先上图

JS练习 - 实时获取鼠标坐标

 非常简单,只是一个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>

 

相关文章:

  • 2021-07-14
  • 2022-12-23
  • 2022-12-23
  • 2022-02-26
  • 2022-12-23
  • 2021-05-29
猜你喜欢
  • 2022-12-23
  • 2021-05-29
  • 2021-11-19
  • 2022-12-23
  • 2022-12-23
  • 2022-01-12
相关资源
相似解决方案