我发现个问题:某个元素的mousedown事件如果是通过其他元素触发的,那么这个事件无法阻止冒泡。最终document上面也会有这个事件。
我的试验过程:首先在document上绑定mouseup,mousedown事件。
在测试一,我将event.stopPropagation()加到button的事件处理函数中。当我按下鼠标时不会触发document事件处理函数。
在测试二,由于p元素的mousedown事件是由btn元素的mousedown事件触发的。那么无论你在哪个元素内的处理函数内加入event.stopPropagation()都不会阻止事件冒泡,最终都会在document上触发mouseup,mousedown事件。甚至在p元素的父元素div上加入阻止冒泡代码也没有任何效果。
不知道其他同学是否也发现了这个问题,能不能解释下这是为什么!?
正常情况下,假如现在有三个元素嵌套<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