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

Question

我有一个SVG,其中有更多SVG,其中包含可变数量的rect元素,所有这些都是从数据对象生成的.这是一般的层次结构:

<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的理解是,当光标进入/离开子元素时,它们不应该触发 - 这看起来像是鼠标悬停/鼠标移动所期望的行为.当然,我理想的是,当我离开每个部分(我已经使用颜色描绘)时,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没有流布局,因此子节点不会影响父元素的大小.

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

• 添加一个<rect>没有填充作为背景
• 添加pointer-events:all以使鼠标指针的隐形元素"可见"