Question

我对冒泡感到有些困惑。

<html>
    <body>
        <div onclick="window.location='http://www.yahoo.com';">
            <span>
                <h3 onclick="window.location='http://www.google.com';">
                    Click me
                </h3>
            </span>
        </div>
    </body>
</html>

有人可以解释为什么页面会更改为www.yahoo.com吗？如何强制它“冒泡”而不是“捕获”？

Answer 1

默认会冒泡。无论如何，你不能强迫在IE中捕获，不要将它用作事件处理的可靠方法。

如果您想停止活动，则需要使用event.stopPropagation();和event.cancelBubble = true进行IE浏览。

演示：http://jsfiddle.net/AlienWebguy/cZWQg/（使用window.open()，因此您可以在jsfiddle中看到效果。）

JQuery将规范化event.stopPropagation()函数，以便它适用于所有浏览器。

示例：

$('h3').click(function(e){
    e.stopPropagation();
    window.location = 'http://www.google.com';
});

Answer 2

当单击h3时，它也会调用div的单击，从而重定向到yahoo而不是google

这可能比我能更好地解释它：

http://www.quirksmode.org/js/events_order.html

onclick事件冒泡顺序

2 个答案: