如何停止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事件上的冒泡？

回答

相关问题