事件冒泡

首先要了解什么时候事件冒泡

看个例子

在这里我们写了两个div并让div1包裹div2，分别设置css样式和js，在网页中如下所示

而当只点击红色区域时，却会输出两条信息，证明当红色被点击的时候，蓝色也被点击了。

这就是事件冒泡，当子级发生事件时，会将事件向上级传递，就好像水泡会从水下慢慢浮到水面上一样。

 

如何取消事件冒泡

第一种方法：

在相应的代码中加入event.stopPropagation()

如下

 

第二种方法：

判断事件中target和currentTarget是否相等

此方法有个小弊端，就是需要在每个方法下都要判断一次，导致代码冗杂。