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事件对象(实例 | 源代码):

?<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>????

...这意味着为了获得广泛的兼容性,你必须测试你正在处理的内容,这会变得很丑陋(实例 | 来源):

?<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风格的处理程序并使用像jQuery,Prototype,YUI,Closure或其他任何一个好的JavaScript库.这些平滑的浏览器之间的差异,并提供了大量的实用功能.

例如,使用jQuery,这个HTML:

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

...和这个脚本(实例 | 来源):

$("#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和所有其他类似的功能,让您不必担心这些类型的浏览器不兼容性.