前端事件冒泡探索求助

如图有父盒子和子盒子,父盒子绑定了冒泡的鼠标经过和鼠标离开事件。e2cd880e999f481fb70e0ab3e33d598a.jpg

 

   那么如果把鼠标从父盒子外面移动到父盒子会触发父盒子的鼠标经过事件,如下图。b7f2024a4d444e66aebc0f1961184edb.jpg

   接着从此位置再移动到子盒子,又触发了父盒子的鼠标离开和鼠标经过。d6294323fe9e40569db76803a5009a4a.jpg

   这似乎是因为,鼠标虽然并未离开父盒子,但是经过了子盒子,子盒子的鼠标经过事件冒泡导致了父盒子的鼠标离开事件和父盒子的鼠标经过事件。

  课件上是说冒泡会触发父级的同名事件,如果鼠标经过和鼠标离开不是同名事件,子盒子的鼠标经过只会触发父盒子的鼠标经过而不触发父盒子的鼠标离开。

  但是鼠标从父盒子到子盒子,子盒子的鼠标经过却同时触发了父盒子的鼠标经过和鼠标离开,那么是否说明鼠标经过和鼠标离开是同名事件呢?

 f8db0d8acbcd481f8a370a6244a0a86b.jpg

   接着如果从下面图片红色箭头位置直接从父盒子外面到子盒子,理论来说应该同时触发父盒子的鼠标经过,以及由于子盒子冒泡导致的鼠标经过和鼠标离开,也就是一个鼠标离开和两个鼠标经过。但是为什么实际只有一个鼠标经过呢?

30429af1cd334d24a92c9543a1b02c09.jpg

   接着鼠标从下面第一张图的位置到第二张图的位置,此时同时离开了子盒子和父盒子,那么理论说应该触发父盒子的鼠标离开,以及子盒子鼠标离开冒泡导致的父盒子鼠标经过和鼠标离开。但是为什么只有一个鼠标离开呢?c09ecb443f514554bd83575a46c8b558.jpg

e40c0761308349fc8833a45b259fe584.jpg 

   另外,如果父盒子绑定的是不冒泡的鼠标经过事件mouseenter和鼠标离开事件mouseleave,从父盒子到子盒子就不会触发任何事件,说明鼠标从父盒子到子盒子并不算离开父盒子,也就印证了冒泡的鼠标事件中从父盒子到子盒子触发的鼠标经过和鼠标离开都是由子盒子冒泡产生的吗?

 

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值