javascript - js事件冒泡与捕获，测试有点不对，大神来看看

问题描述

问 题

https://jsfiddle.net/rt9yLzwt/2/

测试链接如上，按道理来讲，点击蓝色框，按照事件的捕获和冒泡原理，事件绑定在红色框中，应该会发生两次点击事件。但是并没有，有人解释解释吗。

解决方案

点击 b 时，如果 b 有绑定 click 事件，会触发，如果这个事件处理里面没有阻止冒泡，会继续触发 a 的 click 事件。然而 b 上并没有绑定 click 事件，所以看到的只是触发 a 的 click 事件的结果，就是一次输出。

点击 a 时，不用说了，也是触发 a 的 click 事件，一次输出

试验一

// 修改一下事件绑定
a.onclick = function() {
    console.log('red one is clicked')
}

b.onclick = function() {
    console.log("green one is clicked");
}

这个时候如果点 a，会输出

red one is clicked

如果点击 b，会输出

green one is clicked
red one is clicked

https://jsfiddle.net/jamesfan...

试验二

a.onclick = function() {
    console.log('red one is clicked')
}

// 在 b 的 click 事件中阻止冒泡
b.onclick = function(e) {
    console.log("green one is clicked");
    e.stopPropagation();
}

这个时候点击 b 就只会输出一句了

green one is clicked

https://jsfiddle.net/jamesfan...

这篇关于javascript - js事件冒泡与捕获，测试有点不对，大神来看看的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！