手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

怎么阻止冒泡事件

时间:2024-10-25 09:24:29

1、第一步,方便编写代码,先打开html编辑器sublimeText,如下图

怎么阻止冒泡事件

2、第二步,编写一个冒泡事件例子,代码如下图例子代码解析:一个为蓝色的盒子包着一个为黄色的盒子,给蓝色盒子绑定事件:点击打印数字1,给黄色盒子绑定事件:点击打印数字2,

怎么阻止冒泡事件

3、第三步,代码显示的效果,如下图因为冒泡的原因点击蓝色盒子会打印:1,点击黄色盒子会打印:1和2(冒泡事件导致父元素的1也打印了一次),

怎么阻止冒泡事件

4、第四步,正常要的结果是点击黄色出现2,实际出现了1和2,下面我们可以使用w3c标准提供的方法解决这个问题:e.stopPropagation();代码使用方法如下图,

怎么阻止冒泡事件

5、第五步,添加阻止冒泡事件函数e.stopPropagation()后,效果如下点击黄色只会打印2(加入阻止事件后只打印2),

怎么阻止冒泡事件

6、最后总结:阻止冒泡事件只需要在函数中加入:e.stopPropagation(),就可以了。

© 手抄报圈