javascript鼠标事件拦截

Question

我目前正面临着javascript和鼠标事件onmouseover：

的问题

• 我有一个第一个元素（svg矩形），当鼠标结束时调用一个函数
• 我在这个矩形上方有一个第二个元素（png图像）（但比矩形小）

问题是当鼠标悬停在图像上时，矩形不会调用该功能 这就像图像拦截事件而无法用它做任何事情。

我知道我也可以将事件添加到图像中以解决问题，但有没有办法让图像对鼠标事件“透明”并将鼠标悬停事件传递给底层元素？

谢谢你，我为我的英语道歉

Answer 1

此问题没有标准解决方案。你可以使用jQuery mouseenter / mouseleave事件来解决这个问题，或者你必须编写一个函数来检测盒子的尺寸和坐标，并自己检查鼠标位置。

点击此处查看示例：JavaScript mouseover/mouseout issue with child element

Answer 2

您可能想尝试CSS属性指针 - 事件：

img.overlay {
   pointer-events: none;
}

“CSS属性指针事件允许作者控制特定图形元素在什么情况下（如果有的话）成为鼠标事件的目标。当未指定此属性时，visiblePainted值的相同特征适用于SVG内容

除了指示元素不是鼠标事件的目标之外，值none指示鼠标事件“遍历”元素并将目标定位在该元素的“下面”。（Source: MDN ）

Answer 3

我找到了一个解决方案：我在另外两个元素上方创建另一个透明矩形来捕获事件。最后一个矩形与第一个矩形同时移动，给出了第一个矩形捕捉鼠标事件的错觉。