Question

将函数附加到SVG组onmouseover的{{1}}事件时，每次指针进入组中的元素时，事件都会发生一次。

即使组中的两个元素出现在另一个元素中，也会发生这种情况。

例如：

+-----+
|A ___|
|  |B |
|__|__|

当指针进入<g>...</g>矩形，并从那里移动到A矩形而不离开B时，会为组{{1}触发A个事件其中包含onmouseover和G。

事件只发生一次，所以我认为这与事件冒泡无关。

我希望将这个组视为一个固定的块，以便在设置自己的事件时我不必担心它的后代。

任何解决方法？我这样做了吗？还有更好的方法吗？

Answer 1

听起来很熟悉，我认为冒泡会在这种情况下咬你。

2008年我的一个SVG Open演示文稿中的一些示例，特别是slide 17应该是有意义的。可能会有类似'mouseenter'/'mouseleave'事件的事情可以解决这个问题，但它们还没有得到w3c推荐。

修改：明确mouseenter和mouseleave在DOM Level 3 Events工作草案中。

Answer 2

您可以检查鼠标所在的元素。如果它是某个组的一部分，则忽略鼠标事件。像这样：

function isRelated(e) { 
    if ($(e.relatedTarget).closest('#rect1,#rect2).length == 0) { //http://api.jquery.com/closest/
        return false;
    }
    return true;
}

这是一个小提琴：http://jsfiddle.net/pFTfm/57/

具有重叠元素的组的SVG onmouseover出现两次

2 个答案: