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，其中包含一个黑色矩形（您的路径），一个粉红色矩形和一个蓝色矩形。当您将鼠标悬停在群组上时，会记录＆＃34;悬停气泡＆＃34;在控制台中，当您将鼠标悬停在其中时，记录＆＃34;取消暂停冒泡＆＃34;：

＆＃13;

＆＃13;

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");
});

＆＃13;

svg {
  background-color: tan;
 }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这是导致问题的原因：

  

每当鼠标指针进入或离开一个节点时，鼠标悬停＆＃34;或者＆＃34; mouseout＆＃34;事件火灾[...]不幸的是，创建这样的效果并不像启动＆＃34;鼠标悬停＆＃34;并在＆＃34; mouseout＆＃34;上结束它。当鼠标从节点移动到其中一个子节点时，＆＃34; mouseout＆＃34;虽然鼠标实际上没有离开节点的范围，但在父节点上触发。更糟糕的是，这些事件就像其他事件一样传播，因此您也会收到＆＃34; mouseout＆＃34;鼠标离开注册处理程序的节点的子节点之一时的事件。

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