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

StackOverflow https://stackoverflow.com/questions/1621919

  •  06-07-2019
  •  | 
  •  

题

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

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

例如：

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

当指针进入A矩形，并从那里移动到B矩形而不离开G时，<=>事件将被触发<=>包含<=>和<< =>

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

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

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

有帮助吗？

解决方案

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

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

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

其他提示

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

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/

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top