SVG捕捉懸停在分組元素

我有一個包含在它的幾個單元的組：路徑（黑色），和2個rects（粉紅色和藍色）SVG捕捉懸停在分組元素

它們都屬於到同一組。

基本上，我想要做的是我想執行一個功能，當組懸停，所以我做的：

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

但羣體的工作方式在組內的每一個元素獲取懸停功能......所以如果我將鼠標懸停在黑色路徑上，然後移動到粉紅色矩形上，它會認爲這是黑色路徑上的懸停，然後懸停在粉紅色矩形上。這不是我想要的。

我只想將鼠標懸停在整個組合區域，並有一次整個組合區域懸停和unhover功能，當整個分組面積unhovered執行功能執行。

有點像，如果所有這些元素都在一個div，我上空盤旋的div ..

來源

2016-10-02 unconditionalcoder

當然你創建一個組，而不是一組？ – Ian

我可以看到你有snap.svg和raphael作爲標籤，但這裏是用純JS的解決方案。

我做了一個簡單的SVG含有黑色矩形（你的路徑），一個粉紅色的矩形和藍色矩形一組。當你將鼠標懸停在該組，它會在控制檯「懸停泡沫」，當你將鼠標懸停出它記錄「unhover泡沫」：

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"> 
 
\t <g> 
 
\t \t <rect x="40", y="40", width="220", height="220", fill="black"></rect> 
 
\t \t <rect x="60", y="60", width="80", height="80", fill="pink"></rect> 
 
\t \t <rect x="160", y="60", width="80", height="80", fill="blue"></rect> 
 
\t </g> 
 
</svg>

這是你的問題的原因：

只要鼠標指針進入或離開節點，就會觸發「mouseover」或「mouseout」事件[...]。不幸的是，創建這樣的效果並不像啓動「mouseover」效果那麼簡單，它在「mouseout」上。當鼠標從一個節點移動到它的一個子節點時，「mouseout」會在父節點上觸發，儘管鼠標實際上並沒有離開節點的範圍。更糟糕的是，這些事件就像其他事件一樣傳播，因此當鼠標離開註冊處理程序的節點的子節點之一時，您也會收到「鼠標移出」事件。

來源代碼和報價：Eloquent JavaScript，來自Marijn Haverbeke。

來源

2016-10-02 08:27:44

感謝你們，你能解釋一下你的代碼嗎？ – unconditionalcoder

來自該書：*「isInside函數遵循給定節點的父鏈接，直到它到達文檔的頂部（當節點變爲空時）或找到我們正在尋找的父節點」*。所以，當你從一個孩子移動到另一個孩子時，這個函數將返回「true」，但是當你進入或離開父母時，它將返回「undefined」。否定的未定義（使用'！'）會給出「真」，因此只有在您輸入或離開父元素時才運行'if'後的代碼。 –

SVG捕捉懸停在分組元素

回答

相關問題