事件的连带触发（冒泡机制）以及解决方法的详解

最新推荐文章于 2021-06-23 18:35:06 发布

Hamburger丶

最新推荐文章于 2021-06-23 18:35:06 发布

阅读量496

点赞数

文章标签： vue.js

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/Hambur_/article/details/109389587

版权

本文详细介绍了事件冒泡机制，即在DOM结构中，子元素的事件会逐级向上层元素传播，导致父元素的事件监听器也被触发。通过示例展示了如何在div和button元素上设置事件监听器，以及事件冒泡的现象。提出了两种解决方法：1) 使用.stop防止事件冒泡；2) 使用.self限制事件仅在直接元素上触发。然而，.self方法存在缺陷，可能无法阻止内层元素事件的冒泡。总结了事件冒泡的解决策略及其局限性。

摘要由CSDN通过智能技术生成

事件的冒泡机制
通俗的讲就是指父元素与子元素分别有一个方法，在触发子元素方法的时候父元素的方法也被触发

如下图所示
创建一个div在div下创建一个button子元素，为div绑定一个名为divHandler的点击事件
为button绑定一个名为btnHandler的点击事件

在这里插入图片描述

我们希望实现
点击div域时会打印出（点击了inner div的点击事件）
点击按钮时会打印出（点击btn 按钮）
在这里插入图片描述

首先点击div
可以看到右边的控制台打印出了（点击了inner div的点击事件）
在这里插入图片描述
点击按钮
可以看到不但触发了button的点击方法也触发了div的点击方法

在这里插入图片描述

以上就是事件的冒泡机制的表现形式

下面是两种解决方法：
1.在事件触发的底层添加(.stop)
2.为div添加限定机制(.self)

1.在事件的底层添加stop

（stop方法可以彻底的阻止事件的冒泡机制）

在这里插入图片描述

2.为div添加限定机制

self方法的作用为：只有当点击当前元素时才会触发事件函数
（此方法解决冒泡有缺陷）
在这里插入图片描述

self解决冒泡机制的缺陷展示

最外层的div添加self
内层div不做处理

在这里插入图片描述

点击外层div

在这里插入图片描述

点击内层div

在这里插入图片描述 点击按钮

可以看到在触发了按钮事件的同时内层的div事件也触发了，
只有外层添加了self的div没有触发事件

以上就是事件的冒泡机制及解决方法的总结

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件的连带触发（冒泡机制）以及解决方法的详解

事件的冒泡机制通俗的讲就是指父元素与子元素分别有一个方法，在触发子元素方法的时候父元素的方法也被触发如下图所示创建一个div在div下创建一个button子元素，为div绑定一个名为divHandler的点击事件为button绑定一个名为btnHandler的点击事件我们希望实现点击div域时会打印出（点击了inner div的点击事件）点击按钮时会打印出（点击btn 按钮）首先点击div可以看到右边的控制台打印出了（点击了inner div的点击事件）点击按钮可以看到不但触发了
复制链接

扫一扫

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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