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的理解是，当光标进入/离开子元素时，它们不应该触发 - 这似乎是你对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没有流式布局，因此子不会影响父元素的大小。

以下解决方案：http://jsfiddle.net/gMXuU/4/

添加<rect>，没有填充作为背景
添加pointer-events:all以使隐藏元素对鼠标指针“可见”

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

1 个答案: