带重叠元素的组的SVG onmouseover发生两次

将函数附加到SVG组<g>...</g>的onmouseover事件中时，每次指针进入组中的元素时都会发生一次事件。带重叠元素的组的SVG onmouseover发生两次

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

例如：

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

当指针进入A矩形，并从那里移动到B矩形不留A，所述onmouseover事件被触发为同时包含A和B组G。

事件只发生一次，所以我认为它不涉及事件冒泡。

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

任何变通？我做得对吗？有没有更好的办法？

来源

2009-10-25 Elazar Leibovich

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

2008年我的一个SVG Open presentation的一些例子，特别是slide 17应该是有趣的。这可能是因为像'mouseenter'/'mouseleave'这样的事件可以解决这个问题，但他们还没有进入W3C的建议。

编辑：要明确mouseenter和mouseleave都在DOM Level 3 Events工作草案。

来源

2009-10-26 18:28:54

谢谢！很高兴看到更多人遇到同样的问题。但我不明白。事件冒泡不应该引发两个事件被触发？一个来自内部矩形，另一个来自外部矩形？ – 2009-10-26 19:09:45

一个例子会很好，也许我误解了你的问题。 – 2009-10-27 08:32:36

让我们看看上面的矩形A和B.当鼠标已经在矩形B中，现在我们只将它移动到矩形A.在这种情况下，我期望矩形A不会得到鼠标悬停事件，因为指针已经在它之上。但它确实得到了mouseover事件。同样，当我从外部输入矩形B时，我期望得到两个鼠标悬停事件，一个来自矩形A，另一个来自矩形B. – 2009-10-27 13:32:04

您可以检查鼠标WAS中的哪个元素。如果它属于某个特定组，则忽略鼠标事件。像这样：

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/

来源

2014-12-04 22:24:25

带重叠元素的组的SVG onmouseover发生两次

回答

相关问题