为了账号安全,请及时绑定邮箱和手机立即绑定

我发现,某个元素的鼠标事件如果通过其他元素触发,无法阻止这个事件的冒泡过程。为什么?

我发现个问题:某个元素的mousedown事件如果是通过其他元素触发的,那么这个事件无法阻止冒泡。最终document上面也会有这个事件。

我的试验过程:首先在document上绑定mouseup,mousedown事件。

在测试一,我将event.stopPropagation()加到button的事件处理函数中。当我按下鼠标时不会触发document事件处理函数。

在测试二,由于p元素的mousedown事件是由btn元素的mousedown事件触发的。那么无论你在哪个元素内的处理函数内加入event.stopPropagation()都不会阻止事件冒泡,最终都会在document上触发mouseup,mousedown事件。甚至在p元素的父元素div上加入阻止冒泡代码也没有任何效果。

不知道其他同学是否也发现了这个问题,能不能解释下这是为什么!?

正在回答

2 回答

正常情况下,假如现在有三个元素嵌套<div><p><button></button></p></div>,每个元素绑定一个click事件。

现在点击button,将会冒泡触发。然后利用event.stopPropagation()阻止冒泡,OK。

现在将buttom里面的事件改为 $("p").click(),

1、event.stopPropagation() 放在button里面;

     在不考虑冒泡的情况下,点击button之后 p的click事件一定会执行,继而引发div。冒泡阻止NG。

2、event.stopPropagation() 放在p里面;

     点击button事件后,触发p的click事件,遇到冒泡阻止,但是button自身也会触发冒泡(即不管button的内容是什么都会触发一次p.click()),所以执行后应该为 p.click()+p.click。冒泡阻止NG。

3、event.stopPropagation() 放在div里面;冒泡阻止NG。

综上所述,冒泡阻止只会阻止放置event.stopPropagation()事件的元素,对于这一种冒泡的阻止,请在button和p里面都放置event.stopPropagation()。


0 回复 有任何疑惑可以回复我~

0.0.0

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

我发现,某个元素的鼠标事件如果通过其他元素触发,无法阻止这个事件的冒泡过程。为什么?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信