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

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

HTML | DOM MouseEvent offsetX 属性

介绍

offsetX 属性返回的是触发鼠标事件的目标元素（即 Event.target）的左侧边缘到事件发生位置的水平距离。

语法
event.offsetX
  • event: 必须。表示 MouseEvent 对象。
示例
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>offsetX 示例</title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: gray;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        var box = document.getElementById('box');
        box.addEventListener('mousemove', function(event) {
            console.log('offsetX: ' + event.offsetX);
        });
    </script>
</body>
</html>

鼠标移动到灰色盒子上，控制台会输出当前鼠标事件的 offsetX 属性值。

兼容性

offsetX 属性已被标准化，此属性支持主流浏览器，并可以在IE低版本中使用hack方式支持。