if语句既执行if里的内容又执行else里的内容？？不存在的（事件冒泡）

“窥屏”时，有群友说遇到一个问题，if语句既执行了if里的内容又执行了else里的内容，这怎么可能呢？

这是贴出的代码大概是这个样子：



看着这代码貌似没啥问题，但是又没有贴出html，不过不难猜出HTML大概是这个样子：



执行后的确是既弹出了1又弹出了0.

仔细看代码里面有个parents方法。首先看一下这个方法是干啥的。

parents方法是在 DOM 树中搜索这些元素的父级元素，也就是说是对DOM树中元素的遍历。

回过头看代码，jQuery中parents寻找的是id为aside下的所有li的父级li元素。yy级的li都有一个父级li元素，而haha级没有父级li元素。

当点击yy级的li时，parents方法先找到yy级的父级li，发现有一个父级li所以弹出1；parents继续向外层遍历，找到haha层的li,发现haha层的li没有父级li元素，于是弹出0。

的确是既弹出1又弹出0，但是这个if是执行了两次。

这就是冒泡事件了。

当点击yy层li时，这个点击事件会像冒泡一样往外层执行。

在这个例子中，造成冒泡事件有以下几个原因：

选择器中li没有明确指出所属树级，这里相当于既给子级加了click事件又给父级加了click事件；

parents（parent）方法会遍历查找元素。

知道是冒泡就好解决啦，直接 return false；或者 event.stopPropagation();

if语句是说一不二的哟~