javascript - 为什么在 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 事件绑定(bind)到 .child-svg元素，但我发现当我的鼠标移动到 <rect> 之间的空白时，事件正在触发元素。我对 mouseenter/mouseleave 的理解是它们不应在光标进入/离开子元素时触发——这似乎是您期望从 mouseover/mouseout 获得的行为。当然，我最理想的是 mouseenter/mouseleave 事件仅在我离开每个部分(我已使用颜色描绘)时触发。

这是相关的 fiddle :http://jsfiddle.net/ysim/yVfuK/4/

编辑:我试着给 .child-svg元素高度和宽度，但这似乎也不起作用:http://jsfiddle.net/ysim/gMXuU/3

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

谢谢!

Answer 1

我的猜测是 .child-svg它本身没有任何区域，因此无法直接将其悬停。当鼠标离开时<rect>它离开了 .child-svg也是。

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

---

这是解决方案:http://jsfiddle.net/gMXuU/4/

• 添加 <rect>没有填充背景
• 添加pointer-events:all使不可见元素对鼠标指针“可见”