js Event对象的5种坐标

2023年6月10日下午2:25 • JavaScript

JS Event对象包含5种不同的坐标属性，它们可以用来描述事件的发生位置，这些坐标属性分别是：

clientX和clientY
pageX和pageY
screenX和screenY
offsetX和offsetY
x和y

下面就逐一介绍这5种坐标属性的含义和使用方法：

1. clientX和clientY

clientX和clientY属性用来获取事件的触发点相对于浏览器窗口可视区域左上角的坐标值。例如下面这个例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>clientX和clientY示例</title>
  <style>
    #box {
      width: 200px;
      height: 200px;
      background-color: yellow;
    }
  </style>
  <script>
    window.onload = function() {
      document.getElementById('box').addEventListener('click', function(e) {
        console.log('clientX: ' + e.clientX + ', clientY: ' + e.clientY);
      });
    };
  </script>
</head>
<body>
  <div id="box"></div>
</body>
</html>

当点击黄色的方块时，控制台会输出当前鼠标相对于浏览器窗口可视区域左上角的坐标值。

2. pageX和pageY

pageX和pageY属性用来获取事件的触发点相对于文档左上角的坐标值。例如下面这个例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>pageX和pageY示例</title>
  <style>
    #box {
      width: 200px;
      height: 200px;
      background-color: yellow;
    }
  </style>
  <script>
    window.onload = function() {
      document.getElementById('box').addEventListener('click', function(e) {
        console.log('pageX: ' + e.pageX + ', pageY: ' + e.pageY);
      });
    };
  </script>
</head>
<body>
  <div id="box"></div>
</body>
</html>

当点击黄色的方块时，控制台会输出当前鼠标相对于文档左上角的坐标值。

3. screenX和screenY

screenX和screenY属性用来获取事件的触发点相对于屏幕左上角的坐标值。例如下面这个例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>screenX和screenY示例</title>
  <style>
    #box {
      width: 200px;
      height: 200px;
      background-color: yellow;
    }
  </style>
  <script>
    window.onload = function() {
      document.getElementById('box').addEventListener('click', function(e) {
        console.log('screenX: ' + e.screenX + ', screenY: ' + e.screenY);
      });
    };
  </script>
</head>
<body>
  <div id="box"></div>
</body>
</html>

当点击黄色的方块时，控制台会输出当前鼠标相对于屏幕左上角的坐标值。

4. offsetX和offsetY

offsetX和offsetY属性用来获取事件的触发点相对于事件源元素的左上角的坐标值。例如下面这个例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>offsetX和offsetY示例</title>
  <style>
    #box {
      position: relative;
      width: 200px;
      height: 200px;
      background-color: yellow;
    }
    #inner-box {
      position: absolute;
      top: 50px;
      left: 50px;
      width: 100px;
      height: 100px;
      background-color: blue;
    }
  </style>
  <script>
    window.onload = function() {
      document.getElementById('box').addEventListener('click', function(e) {
        console.log('offsetX: ' + e.offsetX + ', offsetY: ' + e.offsetY);
      });
    };
  </script>
</head>
<body>
  <div id="box">
    <div id="inner-box"></div>
  </div>
</body>
</html>

当在蓝色的方块内部点击时，控制台会输出当前鼠标相对于蓝色方块左上角的坐标值。

5. x和y

x和y属性是IE浏览器专属的属性，用来获取事件的触发点相对于文档左上角的坐标值。在其它浏览器中，可以用pageX和pageY代替。例如下面这个例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>x和y示例</title>
  <style>
    #box {
      width: 200px;
      height: 200px;
      background-color: yellow;
    }
  </style>
  <script>
    window.onload = function() {
      document.getElementById('box').addEventListener('click', function(e) {
        console.log('x: ' + (e.x || e.pageX) + ', y: ' + (e.y || e.pageY));
      });
    };
  </script>
</head>
<body>
  <div id="box"></div>
</body>
</html>

不同浏览器表现不一，有的使用x和y属性，有的使用pageX和pageY属性，需要根据实际情况做出调整。

以上就是JS Event对象的5种坐标的详细讲解和两条示例说明。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js Event对象的5种坐标 - Python技术站