Javascript鼠标事件拦截

我目前面临Javascript和鼠标事件的问题

onmouseover

：

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

问题是当鼠标在图像上时，rect不会调用该函数。
这就像图像截取事件，而与之无关

---

我知道我也可以将事件添加到图像中以解决问题，但是否有任何方法可以使图像对鼠标事件“透明”，并将

mouseover

事件传输到下方元素？

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

---

请看下面的示例：

您可能希望尝试CSS属性指针事件：

img.overlay {
   pointer-events: none;
}

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

---

除了指示该元素不是鼠标事件的目标之外，值none还指示鼠标事件“穿过”该元素，并以该元素“下面”的任何内容为目标。“（）

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

欢迎使用。撇开语言不谈，如果您在问题中添加一些代码来演示addEventListener中的第三个参数capture flag如何？capture flag并不能解决问题，这可能有助于澄清问题。另外，addEventListener不适用于IETried it，但仍然存在相同的问题：当鼠标移动到图像上时，rect会触发mouseout事件