SVG Snap 悬停在分组元素上

Question

我有一个组，其中包含一些元素： 一条路径（黑色）和 2 个矩形（粉色和蓝色）

他们都属于同一个组。

基本上，我想做的是在组悬停时执行一个函数，所以我这样做：

  group.hover(function(e){ //set up hovering
           console.log("hover bubble");
       }, function(e) {
           console.log("unhover bubble");
    });

但是组的工作方式是组中的每个元素都获得悬停功能......所以如果我将鼠标悬停在黑色路径上然后移动到粉红色矩形，它会认为这是黑色路径的取消悬停然后将鼠标悬停在粉红色的矩形上。这不是我想要的。

我只想将鼠标悬停在整个分组区域上，并在整个分组区域悬停后执行该函数，并在整个分组区域未悬停时执行取消悬停函数。

有点像如果所有这些元素都在一个 div 中，我将鼠标悬停在 div 上..

Answer 1

我可以看到你有 snap.svg 和 raphael 作为标签，但这里是使用纯 JS 的解决方案。

我制作了一个简单的 SVG，其中包含一个黑色矩形（您的路径）、一个粉色矩形和一个蓝色矩形。当您将鼠标悬停在该组上时，它会在控制台中记录“悬停气泡”，当您将鼠标悬停时它会记录“取消悬停气泡”：

var group = document.querySelector("g");

function isInside(node, target) {
    for (; node != null; node = node.parentNode)
      if (node == target) return true;
}

group.addEventListener("mouseover", function(event) {
    if (!isInside(event.relatedTarget, group))
      console.log("hover bubble");
});

group.addEventListener("mouseout", function(event) {
    if (!isInside(event.relatedTarget, group))
       console.log("unhover bubble");
});

svg {
  background-color: tan;
 }

<svg width="300" height="300">
	<g>
		<rect x="40", y="40", width="220", height="220", fill="black"></rect>
		<rect x="60", y="60", width="80", height="80", fill="pink"></rect>
		<rect x="160", y="60", width="80", height="80", fill="blue"></rect>
	</g>
</svg>

这是您的问题的原因：

每当鼠标指针进入或离开节点时，都会触发“mouseover”或“mouseout”事件 [...] 不幸的是，创建这样的效果并不像在“mouseover”上开始效果并在其上结束那样简单“鼠标移出”。当鼠标从一个节点移动到它的一个子节点时，“mouseout”会在父节点上触发，尽管鼠标实际上并没有离开节点的范围。更糟糕的是，这些事件与其他事件一样传播，因此当鼠标离开注册处理程序的节点的子节点之一时，您也会收到“mouseout”事件。

代码和引用的来源：Eloquent JavaScript，来自 Marijn Haverbeke。