为什么e.stopPropagation()不起作用？

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起作用已经太晚了.