Question

我正在读Aaron Gustafson的一本名为“自适应网页设计”的书，因为我得到了一段我不理解的javascript。在研究时我发现了返回false和e.preventDefault之间的区别。我现在也对JavaScript的冒泡效果了解一点，并了解到要停止冒泡，你可以使用e.stopPropagation（）（在非 - 即浏览器中至少）。

我在小提琴里玩，但我无法让它发挥作用。我认为它可能与bubbeling生效的方式有关（从root到元素然后回来？）。

document.body.onclick = function (e) {
    alert("Fired a onclick event!");
    e.preventDefault();
    if ('bubbles' in e) { // all browsers except IE before version 9
        if (e.bubbles) {
            e.stopPropagation();
            alert("The propagation of the event is stopped.");
        } else {
            alert("The event cannot propagate up the DOM hierarchy.");
        }
    } else { // Internet Explorer before version 9
        // always cancel bubbling
        e.cancelBubble = true;
        alert("The propagation of the event is stopped.");
    }
}

这是小提琴：http://jsfiddle.net/MekZii/pmekd/（固定链接）编辑：我复制粘贴了错误的链接！现在修好了！

所以我想看到的是，当你点击锚点时，div上使用的onclick不会被执行（这不是一个实际案例，只是一个研究案例！）

Answer 1

点击元素的事件气泡直到文档对象。

div上的任何事件处理程序都将在主体上的事件处理程序之前触发（因为正文是DOM中它的祖先）。

当事件到达身体时，要阻止它作用于div，为时已晚。

Answer 2

好的，我发现我的第一个小提琴是错的。我找到了另一个可行的示例，并展示了stopPropagation（）的工作方式：

var divs = document.getElementsByTagName('div');

for(var i=0; i<divs.length; i++) {
  divs[i].onclick = function( e ) {
    e = e || window.event;
    var target = e.target || e.srcElement;

    //e.stopPropagation ? e.stopPropagation() : ( e.cancelBubble = true );
    if ('bubbles' in e) { // all browsers except IE before version 9
        if (e.bubbles) {
            e.stopPropagation();
            alert("The propagation of the event is stopped.");
        } else {
            alert("The event cannot propagate up the DOM hierarchy.");
        }
    } else { // Internet Explorer before version 9
        // always cancel bubbling
        e.cancelBubble = true;
        alert("The propagation of the event is stopped.");
    }

    this.style.backgroundColor = 'yellow';

    alert("target = " + target.className + ", this=" + this.className );

    this.style.backgroundColor = '';
  }
}

http://jsfiddle.net/MekZii/wNGSx/2/

示例可在以下链接中找到一些阅读材料： http://javascript.info/tutorial/bubbling-and-capturing

Answer 3

在要取消HTML中从子对象到父对象冒泡的事件的任何地方，请使用以下代码

event.cancelBubble = true;

通过这种方式，您可以停止事件从子元素到父元素的进一步冒泡。

为什么e.stopPropagation（）不起作用？

3 个答案: