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

Why do the mouseenter/mouseleave events fire when entering/leaving child elements in an SVG?

本文关键字：mouseenter 事件 mouseleave SVG 为什么 离开 元素      更新时间：2023-09-26

我有一个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

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

谢谢!

我的猜测是.child-svg本身没有任何区域，所以没有办法直接悬停它。当鼠标离开<rect>，它也离开.child-svg。

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

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

  • 添加无填充的<rect>作为背景
  • 添加pointer-events:all使不可见元素对鼠标指针"可见"

相关文章：