为什么在 SVG 中进入/离开子元素时会触发 mouseenter/mouseleave 事件？

Question

我有一个 SVG，其中有更多 SVG，其中包含数量可变的矩形元素，全部由数据对象生成。这是一般层次结构：

<svg class="parent-svg">
    <svg class="child-svg">
        <rect />
        <rect />
    </svg>
    <svg class="child-svg">
        <rect />
        <rect />
    </svg>
</svg>

我已将 mouseenter/mouseleave 事件绑定到

.child-svg

元素，但我发现当我的鼠标移至

<rect>

元素之间的空白时，这些事件就会触发。我对 mouseenter/mouseleave 的理解是，当光标进入/离开子元素时，它们不应该触发——这似乎是您期望的 mouseover/mouseout 行为。当然，我理想的情况是 mouseenter/mouseleave 事件仅在我离开每个部分（我已使用颜色描绘）时触发。

这是相关的小提琴：http://jsfiddle.net/ysim/yVfuK/4/

编辑：我尝试为

.child-svg

元素提供高度和宽度，但这似乎也不起作用：http://jsfiddle.net/ysim/gMXuU/3

编辑：这是解决方案的小提琴，根据@pornel的建议修复：http://jsfiddle.net/ysim/HUHAQ/

谢谢！

Answer 1

我的猜测是，

.child-svg

本身没有任何区域，因此无法直接将其悬停。当老鼠离开

<rect>

时，它也会离开

.child-svg

。

SVG 没有流布局，因此子元素不会影响父元素的大小。

---

• 添加一个没有填充的

  <rect>

  作为背景
• 添加

  pointer-events:all

  使不可见元素对鼠标指针“可见”