我发现，某个元素的鼠标事件如果通过其他元素触发，无法阻止这个事件的冒泡过程。为什么？
小王子抓猫咪
2016-05-12 18:44
我发现个问题：某个元素的mousedown事件如果是通过其他元素触发的，那么这个事件无法阻止冒泡。最终document上面也会有这个事件。
我的试验过程：首先在document上绑定mouseup,mousedown事件。
在测试一，我将event.stopPropagation()加到button的事件处理函数中。当我按下鼠标时不会触发document事件处理函数。
在测试二，由于p元素的mousedown事件是由btn元素的mousedown事件触发的。那么无论你在哪个元素内的处理函数内加入event.stopPropagation()都不会阻止事件冒泡，最终都会在document上触发mouseup,mousedown事件。甚至在p元素的父元素div上加入阻止冒泡代码也没有任何效果。
不知道其他同学是否也发现了这个问题，能不能解释下这是为什么！？
2回答
-
- Cassie_yu
- 2016-07-11 19:52:37
正常情况下，假如现在有三个元素嵌套<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()。
-
- Web前端程序猿
- 2016-05-12 19:57:32
0.0.0
jQuery基础(三)—事件篇
89997 学习 · 625 问题
相似问题