MouseEvent.如果移动到不同的子元素，offsetX/Y重置为0

MouseEvent.offsetX/Y resets to 0 if moving over different child elements

本文关键字：offsetX 元素 移动 如果 MouseEvent      更新时间：2023-09-26

按以下步骤操作。

包含一个父div和3个子div。点击监听器被附加到父div上，并且应该用相对于父div的鼠标位置抛出警报:

const parent = document.getElementById('main');
parent.addEventListener('click', handleMouseClick);
function handleMouseClick(e) {
    alert(e.offsetX, e.offsetY);
}

我期望的是:单击任何子div并获得相对于父div (#main)的单击位置。

实际情况:偏移x/Y总是等于我点击的子元素的点击位置。

为什么会发生这种情况?我该怎么修理它?是否有另一种方法来获得相对于父div的鼠标位置，考虑到潜在的滚动?

你可以这样得到你想要的:

function handleMouseClick(e) {
  child = e.target.getBoundingClientRect();
    alert(e.offsetX+child.left, e.offsetY+child.top);
}

子事件被触发，因为它在顶部。因此，您可以获取子元素的getBoundingClientRect()，并且可以访问它的左侧和顶部字段，以确定它相对于其父元素的位置。我希望这对你有帮助!

编辑:如果事件的父。目标没有定位在(0:0)，那么你还必须涉及到父元素的偏移量(可能还有父元素的父元素等等)，以便获得鼠标点击的位置。你可以通过调用parentElement字段来遍历DOM对象的父节点(e.p target.parentElement)。

例如:

function handleMouseClick(e) {
  childBounds = e.target.getBoundingClientRect();
  parentBounds = e.target.parentElement.getBoundingClientRect();
   alert((e.offsetX+childBounds.left-parentBounds.left) + ", "+ (e.offsetY+childBounds.top-parentBounds.top));
}

可以给子元素添加CSS属性

.child {
  pointer-events: none;
}

取以下代码

SensorGoldenCalTable:{   // SensorGoldenCalTable
       PixId:    3,
       SlimLscType:    0,
       Width:    0,
       Height:    0,
       OffsetX:    0,
       OffsetY:    0,
       TblSize:    0,
       IspLSCReg:    {0, 0xd048d035, 0, 0x00480041, 0},
       GainTable:    {
            0x99, 0x6d, 0x94, 0x63, 0xa1, 0x62, 0x8b, 0x5f, 0x1a, 0x5d, 0xb2, 0x54, 0xf2, 0x53, 0xba, 0x51, 
            0x0c, 0x4f, 0x59, 0x48, 0x73, 0x47, 0xba, 0x45, 0xa7, 0x45, 0xee, 0x3f, 0xec, 0x3e, 0x7a, 0x3d, 
            0xcb, 0x3e, 0x03, 0x3a, 0x04, 0x39, 0xd4, 0x37, 0x23, 0x3a, 0xf5, 0x35, 0x09, 0x35, 0x0c, 0x34, 
            0x69, 0x37, 0xac, 0x33, 0xc0, 0x32, 0xde, 0x31, 0x8d, 0x36, 0x0b, 0x33, 0x10, 0x32, 0x5a, 0x31, 
            0x85, 0x37, 0xc4, 0x33, 0xd1, 0x32, 0x24, 0x32, 0x2a, 0x3a, 0xfa, 0x35, 0x0f, 0x35, 0x30, 0x34, 
            0x02, 0x3f, 0xce, 0x39, 0xe8, 0x38, 0x93, 0x37, 0xb8, 0x45, 0xfd, 0x3f, 0x3e, 0x3f, 0x98, 0x3d, 
            0x25, 0x50, 0xd6, 0x48, 0x16, 0x48, 0x4a, 0x46, 0x17, 0x5e, 0x7f, 0x55, 0xd1, 0x54, 0x48, 0x52,
相关文章：