什么是 event.offsetX？
在前端开发中，我们经常需要处理鼠标事件。其中，event.offsetX 是一个非常实用的属性，它代表了鼠标事件相对于目标元素左上角的水平偏移量。
举个例子，在下面的 HTML 代码中，当鼠标移动到 div 元素中时，会触发 mousemove 事件。在事件处理函数中，我们可以通过 event.offsetX 获取鼠标相对于 div 左边缘的距离。
-- -------------------- ---- -------
---- ---------- ------------- ------ ------- ------ ----------------- -------------
--------
--- ----- - ---------------------------------
----------------------------------- --------------- -
---------------------------
---
---------Firefox 中的坑
然而，在 Firefox 浏览器中，event.offsetX 并不总是按照预期工作。事实上，在某些情况下，它的值可能会与其他浏览器不同，导致代码出现错误。
具体来说，当元素有任何形式的“框装”（例如边框、填充或外边距）时，event.offsetX 的值就会被调整。这是因为 Firefox 认为鼠标指针相对于边框而不是元素本身的位置更有用。
考虑下面这个例子，其中 div 元素设置了 10 像素的填充：
-- -------------------- ---- -------
---- ---------- ------------- ------ ------- ------ ----------------- ----- -------- -------------
--------
--- ----- - ---------------------------------
----------------------------------- --------------- -
---------------------------
---
---------在 Firefox 中，当鼠标移动到左边缘时，event.offsetX 的值将为 10，而不是 0。这意味着我们需要对 event.offsetX 进行进一步的计算才能得到准确的值。
解决问题
解决这个问题的方法是使用 event.target.getBoundingClientRect() 方法。这个方法返回目标元素相对于视口的位置和大小信息，可以帮助我们计算出元素内部的偏移量。
具体来说，我们可以使用以下代码来获取准确的鼠标位置：
-- -------------------- ---- -------
---- ---------- ------------- ------ ------- ------ ----------------- ----- -------- -------------
--------
--- ----- - ---------------------------------
----------------------------------- --------------- -
--- ---- - -------------------------------------
--- ------- - ------------- - ----------
---------------------
---
---------在这个例子中，我们首先通过 getBoundingClientRect() 获取了目标元素的位置和大小信息。然后，我们将 event.clientX（即鼠标相对于视口的位置）减去元素左边缘相对于视口的位置，得到了鼠标相对于元素内部左边缘的距离。
总结
在 Firefox 中使用 event.offsetX 时需要格外小心。如果你的代码需要在各种浏览器中运行，请记得进行测试并注意可能存在的问题。通过使用 getBoundingClientRect() 方法，我们可以避免这些问题，并确保我们的代码在所有浏览器中都能正确地工作。
示例代码：https://codepen.io/chatgpt/pen/PojxGmP
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24335