3

我正在阅读 Aaron Gustafson 的一本名为“自适应网页设计”的书，如果我有一段我不理解的 javascript。在研究时，我发现了返回 false 和 e.preventDefault 之间的区别。我现在也对 JavaScript 的冒泡效果有了一点了解，并且开始明白要停止冒泡，您可以使用 e.stopPropagation() （至少在无浏览器中）。

我在玩小提琴，但我无法让它工作。我认为这可能与冒泡生效的方式有关（从根到元素再返回？）。

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 不会被执行（这不是一个实际案例，只是一个研究案例！）

4

3 回答 3

9

事件从被点击的元素冒泡到文档对象。

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

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

于 2013-07-16T15:51:14.960 回答
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

于 2013-07-17T00:25:05.303 回答
0

无论您想在 HTML 中取消从子级到父级的冒泡事件，请使用以下代码

event.cancelBubble = true;

通过使用这种方式，您可以阻止事件从子元素到父元素进一步向上冒泡。

于 2018-07-23T12:34:37.650 回答