if语句既执行if里的内容又执行else里的内容??不存在的(事件冒泡)

来源:互联网 发布:mac版matlab安装 编辑:程序博客网 时间:2024/05/24 06:53

“窥屏”时,有群友说遇到一个问题,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语句是说一不二的哟~

原创粉丝点击