DOM Level 0事件：如何防止外部点击发射？

Question

检查下面的代码：

​<div onclick="alert('Hi, from outer div!');"> 
    <button onclick="alert('Hi, from button!');">Tha button</button>, Click me! 
</div>​​​​ 

是否有办法防止外DIV从发射一个onclick当我点击按钮？任何想法如何取消DOM级别0事件？

注意：我不能使用jQuery。它需要在Chrome，FireFox，IE6-9上运行。

Answer 1

是的。在大多数标准的浏览器，你在事件对象上调用stopPropagation（live example | source）：

​<div onclick="alert('Hi, from outer div!');"> 
    <button onclick="alert('Hi, from button!'); event.stopPropagation();">Tha button</button>, Click me! 
</div>​​​​ 

在IE浏览器的较旧的副本，您必须将cancelBubble属性设置为true代替：

​<div onclick="alert('Hi, from outer div!');"> 
    <button onclick="alert('Hi, from button!'); event.cancelBubble = false;">Tha button</button>, Click me! 
</div>​​​​ 

。 ..这意味着为了广泛的兼容性，你必须测试你正在处理哪个，哪个变得丑陋（live example | source）：

​<div onclick="alert('Hi, from outer div!');"> 
    <button onclick="alert('Hi, from button!'); if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; }">Tha button</button>, Click me! 
</div>​​​​ 

个

这些各种各样的差别，为什么我总是建议移动从旧DOM0式处理掉，并使用一个体面的JavaScript库，例如jQuery，Prototype，YUI，Closure，或any of several others。这些平滑的浏览器之间的差异，并提供了大量的实用功能。

例如，使用jQuery，这个HTML：

​<div id="theDiv"> 
    <button id="theButton">Tha button</button>, Click me! 
</div>​​​​ 

...这脚本（live example | source）：

$("#theDiv").click(function() { 
    alert('Hi, from outer div!'); 
}); 
$("#theButton").click(function(event) { 
    alert('Hi, from button!'); 
    event.stopPropagation(); // Even on IE, jQuery provides this 
}); 

或经常使用jQuery，你看人家只是做return false;在其事件处理程序中。处理器中的return false;，jQuery中的，会做两件事：停止传播，并阻止事件可能具有的任何默认操作（例如，在链接上的点击处理程序中）。 stopPropgation不会阻止默认设置。

但这并不意味着是jQuery的广告（虽然它是一个非常好的库）。关闭，YUI，Prototype和其他所有其他类似的功能让你不用担心浏览器的这些不兼容问题。

Answer 2

<div onclick="alert('Hi, from outer div!');"> 
    <button onclick="event.stopPropagation(); alert('Hi, from button!');">Tha button</button>, Click me! 
</div>​ 

我添加的是一个event.stopPropagation（）; 这样做是停止发生冒泡