帶重疊元素的組的SVG onmouseover發生兩次

將函數附加到SVG組<g>...</g>的onmouseover事件中時，每次指針進入組中的元素時都會發生一次事件。帶重疊元素的組的SVG onmouseover發生兩次

即使組中的兩個元素出現在另一個內部，也會發生這種情況。

例如：

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

當指針進入A矩形，並從那裏移動到B矩形不留A，所述onmouseover事件被觸發爲同時包含A和B組G。

事件只發生一次，所以我認爲它不涉及事件冒泡。

我希望這個小組被視爲一個堅實的塊，以便在設置自己的事件時不必擔心它的後代。

任何變通？我做得對嗎？有沒有更好的辦法？

來源

2009-10-25 Elazar Leibovich

聽起來很熟悉，我認爲在這種情況下冒泡會咬你。

2008年我的一個SVG Open presentation的一些例子，特別是slide 17應該是有趣的。這可能是因爲像'mouseenter'/'mouseleave'這樣的事件可以解決這個問題，但他們還沒有進入W3C的建議。

編輯：要明確mouseenter和mouseleave都在DOM Level 3 Events工作草案。

來源

2009-10-26 18:28:54

謝謝！很高興看到更多人遇到同樣的問題。但我不明白。事件冒泡不應該引發兩個事件被觸發？一個來自內部矩形，另一個來自外部矩形？ – 2009-10-26 19:09:45

一個例子會很好，也許我誤解了你的問題。 – 2009-10-27 08:32:36

讓我們看看上面的矩形A和B.當鼠標已經在矩形B中，現在我們只將它移動到矩形A.在這種情況下，我期望矩形A不會得到鼠標懸停事件，因爲指針已經在它之上。但它確實得到了mouseover事件。同樣，當我從外部輸入矩形B時，我期望得到兩個鼠標懸停事件，一個來自矩形A，另一個來自矩形B. – 2009-10-27 13:32:04

您可以檢查鼠標WAS中的哪個元素。如果它屬於某個特定組，則忽略鼠標事件。像這樣：

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/

來源

2014-12-04 22:24:25

帶重疊元素的組的SVG onmouseover發生兩次

回答

相關問題