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

Question

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

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

Answer 1

点击 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...

Answer 2

为什么会触发2次？
你觉得点击b的同时，也点击a了？

Answer 3

你蓝色的并没有绑定事件啊，略微修改了一下，应该符合你测试的想法了。
链接如下：
https://jsfiddle.net/rt9yLzwt/7/
另外：蓝色是blue

Answer 4

事件冒泡并不是这样的...
再去看看捕获和冒泡那些资料吧。
点击b,冒泡到a，之后就触发a的事件，就是这样。并不是点击b触发a事件，冒泡到a还触发a事件。