SVG Snap 懸停在分組元素上

Question

我有一個包含一些元素的組：路徑（黑色）和 2 個矩形（粉紅色和藍色）

他們都屬於同一個組。

基本上，我想要做的是我想在組懸停時執行一個函數，所以我這樣做：

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

但是組的工作方式是組中的每個元素都獲得懸停功能......所以如果我將鼠標懸停在黑色路徑上然后移動到粉紅色矩形，它會認為這是黑色路徑的取消懸停然后懸停在粉紅色的矩形……這不是我想要的。

我只想將鼠標懸停在整個分組區域上，並在整個分組區域懸停后執行該函數，並在整個分組區域未懸停時執行 unhover 函數。

有點像如果所有這些元素都在一個 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”會在父節點上觸發，盡管鼠標實際上並沒有離開節點的范圍。 更糟糕的是，這些事件就像其他事件一樣傳播，因此當鼠標離開注冊處理程序的節點的子節點之一時，您還將收到“mouseout”事件。

代碼和引用的來源：Eloquent JavaScript ，來自 Marijn Haverbeke。