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语句是说一不二的哟~

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值