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

是。在大多数标准浏览器中，您在事件对象live example | source）上调用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>

...这意味着为了获得广泛的兼容性，您必须测试您正在处理的内容，这会变得很丑陋（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风格的处理程序并使用像jQuery，Prototype，YUI，{{3}这样不错的JavaScript库。 }，或Closure。这些浏览器之间的差异平滑，并提供了大量的实用功能。

例如，使用jQuery，这个HTML：

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

...和此脚本（any of several others | live example）：

$("#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（）; 这样做是为了阻止冒泡

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

2 个答案: