如何停止DOMSubtreeModified事件上的冒泡？

我有一個非常簡單的場景。我有以下HTML：如何停止DOMSubtreeModified事件上的冒泡？

<h1>Hello</h1> 
<input type="button" value="Change" id="change" />

與相應的JS：

var h1 = $("h1").get(0); 

h1.addEventListener("DOMSubtreeModified", function(ev) { 

    console.log("Changed"); 

    ev.bubbles = false; 
    ev.cancelBubble = true; 
    ev.defaultPrevented = true; 
    ev.preventDefault(); 
    ev.stopPropagation(); 
    ev.returnValue = false; 

    return false; 

}, false); 

$("#change").click(function() { 
    $("h1").text("World"); 
});

所以，這基本上只是改變了H1節點的文本，然後在事件被觸發。然而，事件發生了兩次（正如我假設的冒泡的結果）。正如你所看到的，我已經嘗試過把所有東西都扔到它上面來試圖讓它不會被觸發兩次，但是這並不能阻止它。如果你想玩的代碼，你可以檢查出來：http://jsfiddle.net/sECtq/。任何幫助，將不勝感激。謝謝。

來源

2011-07-22 naivedeveloper

'ev.preventDefault（）;'會導致IE拋出異常 – qwertymk

此行爲不是由冒泡造成的。

$的.text（）執行2個步驟設置新的文本：

刪除現有的內容
插入一個新的textNode

兩個步驟觸發DOMSubtreeModified，讓您得到2警報。

您可以使用例如如下：

$("h1")[0].firstChild.data="World";

這將只改變textNode的內容而不刪除節點。

來源

2011-07-22 01:55:42

Doh。非常好。我不知道。我很好奇爲什麼文本使用2步過程？我的意思是，你提供的示例看起來似乎只是將其縮小到一步...... – naivedeveloper

我的建議假定只有一個textNode，但jQuery的text（）替換了整個內容（可能有多個不同類型的節點）。所以jQuery首先使用他的empty（）方法去除這些節點以避免內存泄漏。 –

或者您還可以檢查傳播是否已停止。看看http://api.jquery.com/event.isPropagationStopped l

來源

2011-07-22 02:21:02

如何停止DOMSubtreeModified事件上的冒泡？

回答

相關問題