clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析-前端开发

首先，这些属性都是 MouseEvent 对象的属性，表示事件发生时鼠标的位置信息。

首先，这些属性都是 MouseEvent 对象的属性，表示事件发生时鼠标的位置信息。

接下来，我们逐个来分析一下这些属性的区别。

clientX
clientX 表示事件发生时，鼠标在浏览器视口中的水平坐标。也就是说，它是相对于浏览器窗口左上角的水平距离。


下面是一个示例：
<div id="box" style="width: 200px; height: 200px; border:1px solid #000;">
  <script>
    document.querySelector('#box').addEventListener('click', function(event) {
      console.log(`clientX: ${event.clientX}`);
    });
  </script>
</div>

当在 #box 内点击时，会在控制台输出鼠标在浏览器视口中的水平坐标。

pageX

pageX 表示事件发生时，鼠标在文档中的水平坐标。也就是说，它是相对于文档左上角的水平距离。在浏览器滚动的情况下，它的值会包括滚动距离。

下面是一个示例：
<div id="box" style="width: 200px; height: 200px; border:1px solid #000;">
  <script>
    document.querySelector('#box').addEventListener('click', function(event) {
      console.log(`pageX: ${event.pageX}`);
    });
  </script>
</div>

当在 #box 内点击时，会在控制台输出鼠标在文档中的水平坐标。

offsetX

offsetX 表示事件发生时，鼠标相对于事件对象的内部元素的水平坐标。

下面是一个示例：
<div id="box" style="width: 200px; height: 200px; border:1px solid #000;">
  <script>
    document.querySelector('#box').addEventListener('click', function(event) {
      console.log(`offsetX: ${event.offsetX}`);
    });
  </script>
</div>

当在 #box 内点击时，会在控制台输出鼠标相对于 #box 元素的水平坐标。


x
x 是 pageX 的别名，表示事件发生时鼠标在文档中的水平坐标。在某些浏览器中，可能没有 pageX 属性，所以可以使用 x 来代替。


layerX
layerX 已经被废弃，但是在一些老的浏览器中仍然可以使用。它表示事件发生时，鼠标在相对于事件的目标元素的水平坐标。


下面是一个示例：
<div id="box" style="width: 200px; height: 200px; border:1px solid #000;">
  <script>
    document.querySelector('#box').addEventListener('click', function(event) {
      console.log(`layerX: ${event.layerX}`);
    });
  </script>
</div>

当在 #box 内点击时，会在控制台输出鼠标相对于事件目标元素 #box 的水平坐标。

screenX

screenX 表示事件发生时，鼠标在屏幕中的水平坐标。也就是说，它是相对于屏幕左上角的水平距离。

下面是一个示例：
<div id="box" style="width: 200px; height: 200px; border:1px solid #000;">
  <script>
    document.querySelector('#box').addEventListener('click', function(event) {
      console.log(`screenX: ${event.screenX}`);
    });
  </script>
</div>

当在 #box 内点击时，会在控制台输出鼠标在屏幕中的水平坐标。

offsetLeft

offsetLeft 表示元素相对于其最近的已定位祖先元素的左外边框的距离，单位为像素。

下面是一个示例：
<div id="container" style="position: relative; left: 50px; top: 50px;">
  <div id="box" style="width: 100px; height: 100px; border: 1px solid #000;"></div>
  <script>
    document.querySelector('#box').addEventListener('click', function(event) {
      console.log(`offsetLeft: ${event.target.offsetLeft}`);
    });
  </script>
</div>

当在 #box 内点击时，会在控制台输出 #box 相对于 #container 的左外边框的距离。