📌  相关文章
📜  HTML | DOM MouseEvent offsetY 属性(1)

📅  最后修改于: 2023-12-03 15:15:35.370000             🧑  作者: Mango

HTML | DOM MouseEvent offsetY 属性

简介

MouseEvent 接口的 offsetY 属性表示当鼠标事件发生时，鼠标指针相对于目标元素的上边缘的偏移量（即垂直方向的偏移量）。它是事件的只读属性。

语法
event.offsetY
  • event：表示当前的事件对象。
示例
<!DOCTYPE html>
<html>
  <head>
    <title>offsetY 属性示例</title>
    <style>
      div {
        width: 300px;
        height: 200px;
        background-color: grey;
        position: relative;
      }

      p {
        position: absolute;
        top: 50px;
        left: 50px;
      }
    </style>
  </head>
  <body>
    <div onmousemove="showCoord(event)">
      <p>Move your mouse over the gray box.</p>
    </div>
    <script>
      function showCoord(event) {
        var x = event.clientX;
        var y = event.clientY;
        var offsetY = event.offsetY;
        console.log("Coordinates: (" + x + "," + y + ")");
        console.log("OffsetY: " + offsetY);
      }
    </script>
  </body>
</html>

在上面的示例中，我们创建了一个 div 元素并设置了其 position 属性为 relative，然后在 div 中嵌套了一个 p 元素，并设置了其 position 属性为 absolute，同时指定了 top 和 left 属性的值。这里的目的是为了在 div 元素中心放置一个子元素，以便测试鼠标事件。

然后我们通过 onmousemove 属性设置了一个鼠标移动事件监听器 showCoord(event)，当鼠标在 div 元素内移动时，该事件触发，并调用 showCoord() 函数。

在 showCoord() 函数中，我们分别获取了鼠标指针在页面中的水平坐标和垂直坐标，并打印输出，同时通过 event.offsetY 属性获取了鼠标指针相对于目标元素上边缘的偏移量，也打印输出。

浏览器兼容性

| 浏览器 | Chrome | Firefox | IE | Opera | Safari | | ------ | ----------- | ------- | ------- | ------- | ------- | | 版本 | 1.0+ | 1.0+ | 9.0+ | 10.0+ | 1.0+ |

参考链接