React 组件防止冒泡方法

已于 2023-08-13 14:00:26 修改
阅读量1.5k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： react.js 前端 前端框架
于 2023-08-12 15:36:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Constantiny/article/details/132160914
在React开发中，遇到子组件点击事件导致父组件事件触发的问题，尤其是在使用antd库时。实际上，这是由于JavaScript的事件冒泡机制。为解决此问题，可以在子组件中添加阻止冒泡的代码，例如在事件处理函数中使用`event.stopPropagation()`。如果发现无效，可以尝试在子组件外再包裹一层来阻止事件传播。

背景

在使用 antd 组件库开发时，发现点击一个子组件，却触发了父组件的点击事件，比如，我在一个折叠面板里面放入一个下拉框或者对下拉框列表渲染做定制，每个下拉框候选项都有一个子组件…
在这里插入图片描述

解决

其实这就是 Javascript 的冒泡机制

  • 加上一行代码就可以
onClick={e=>e.stopPropagation()}
  • 有的时候发现不生效，那我们可以再包一层就行了
                <Select.Option key={
   
   val.id} value=<
了解本专栏 订阅专栏 解锁全文 超级会员免费看
React中阻止事件冒泡的方法及示例代码
BitSlinger的博客
10-03 1560
当事件触发时，调用该方法可以阻止事件向上冒泡，即停止事件传播到更高层级的组件。根据你的需求选择适合的方法，并在事件处理函数中使用相应的方法来阻止事件传播。在上面的代码中，当点击子组件时，子组件的点击事件处理函数会被触发，并打印出"子组件被点击"。在上面的代码中，当点击子组件时，子组件的点击事件处理函数会被触发，并打印出"子组件被点击"。，父组件的点击事件处理函数不会被触发，因此不会打印出"父组件被点击"。，父组件的点击事件处理函数不会被触发，因此不会打印出"父组件被点击"。方法来阻止事件冒泡。
如何在 React 中阻止事件冒泡
ByteGlide的博客
09-30 3728
事件冒泡是指在 Web 开发中当一个元素触发某个事件时，该事件会向上层元素传播，直到到达文档根节点。在 React 中，我们可以使用一些技术手段来取消或阻止事件冒泡的传播。在 React 中，事件传播分为捕获阶段和冒泡阶段。通过上述三种方法，我们可以在 React 中取消或阻止事件冒泡的传播。根据具体的需求，选择合适的方法来处理事件冒泡问题。React 中的事件处理函数会接收到一个事件对象，我们可以调用该对象的。方法来取消事件的继续传播。另一种取消事件冒泡的方法是使用事件对象的。方法来阻止事件冒泡的传播。
手把手教你用 React 实现可拖拽排序的 Ant Design 表格
weixin_43172311的博客
03-27 795
通过本文，您已掌握：✅ React 高阶组件原理✅ 不可变数据操作✅ 拖拽排序核心实现✅ 性能优化技巧✅ 主流拖拽库选型指南在实际项目中，请根据具体需求选择合适方案。对于简单表格推荐使用array-move的组合，复杂场景可考虑。
antd阻止组件冒泡的一种方法
qq_44766377的博客
03-17 4164
在组件上加 .stop 是没用的 可以在组件外边加上一个标签 标签属性上 @click.stop就可以阻止冒泡事件了 <!-- 是否选中--> <a slot="operation2" slot-scope="text" @click.stop> <a-switch default-checked @change="onChange" :defaultChecked='false' /> </a&...
阻止事件冒泡 -- 在antd-mobile中，拦截点击picker后默认打开行为
daisymao0205的博客
07-30 2018
由于公司项目业务逻辑需求，需要在点击picker后判断数据是否为空，再决定是否打开picker；若接口响应数组为空，阻止picker打开。 这里就需要用到jQuery的event.stopImmediatePropagation()方法（执行第一个事件处理程序，并阻止剩下的事件处理程序被执行） 给picker外层DIV进行添加id属性 <div id='ID'> <Picker data={data} cols={1} {...g...
如何在React中阻止事件冒泡？
Code365
05-17 981
在React中，阻止事件冒泡可以通过合成事件的stopPropagation()方法实现。基本用法是在子组件的事件处理函数中调用e.stopPropagation()，以阻止事件冒泡到父组件。然而，在特殊场景下需要注意以下几点：1. 当原生事件与合成事件共存时，阻止冒泡可能无效，建议统一使用一种事件类型；2. 如果父组件在捕获阶段监听事件（onClickCapture），子组件阻止冒泡无效，需在捕获阶段也调用stopPropagation()。此外，应避免过度依赖事件冒泡，优先使用组件间显式通信（如prop
React中阻止事件冒泡的问题详析
10-17
React事件处理程序接收到的合成事件对象有一个`stopPropagation`方法，可以用来阻止冒泡。 例如，考虑以下React组件代码段： ```jsx function MyComponent({ children }) { const handleChildClick = (event) => {...
React冒泡和阻止冒泡的应用详解
10-14
React中的事件冒泡和阻止冒泡是前端开发中常见的概念，尤其在构建复杂交互的组件时显得尤为重要。事件冒泡是指事件从最深的节点开始，逐级向上传播到父节点，直到到达文档的根节点。在React中，由于其虚拟DOM的事件...
react antd阻止Checkbox事件冒泡（折叠面板标题中增加复选框，阻止点击复选框折叠面板展开/折叠）
坚强的泡沫的博客
06-27 2206
react antd阻止Checkbox事件冒泡（折叠面板标题中增加复选框，阻止点击复选框折叠面板展开/折叠）
react + ant select自定义多选+Popconfirm气泡提示框 【单个】
weixin_40603062的博客
09-26 776
【代码】react + ant select自定义多选+Popconfirm气泡提示框 【单个】
学习react过程中遇到的JavaScript 的事件冒泡问题
a1009698473的博客
08-29 275
用react实现实现点击图片和背景时分别切换不同的效果。
React onClick 事件阻止冒泡
天问博客-专注于大前端技术
12-28 3052
在 React 中，你可以通过使用 onClick 事件来处理点击事件，并且可以通过在事件处理函数中调用 stopPropagation() 方法来阻止事件冒泡。本文将为你提供 类组件 和 函数式组件 两种示例。
Antd select option为单个的Collaps 阻止点击收起下拉框
书包的博客
06-07 3086
因select事件，点击箭头想展开折叠面板，但下拉框会收起。 我想在点击箭头的时候展开收起折叠面板，点别的地方收起下拉框。 所以在渲染的时候 所有Collapse外放置了一个div。 给div添加事件，判断如果是svg箭头或者svg的父元素span就阻止冒泡。 data.map((item)=>{ return <div onClick-={(e:any)=>handleStop(e)}> <Collapse bordered={false} defaultActiveK.
react 函数式组件，阻止点击冒泡事件
qq_66972523的博客
10-24 1882
react 函数式组件，阻止点击冒泡事件。
react阻止事件冒泡
徐同保的专栏
06-04 772
react阻止事件冒泡： <Menu onClick={e => e.domEvent.stopPropagation()}> <Menu.Item key="0" onClick={() => handleEdit(item.id)}> 修改名称 </Menu.Item>
antd的Dropdown组件阻止事件冒泡
热门推荐
吴小迪的博客
07-30 4万+
笔者在开发的过程中遇到了使用Dropdown组件在点击事件的时候阻止事件冒泡。 阻止事件冒泡就是使用event对象的stopPropagation()方法。 Dropdown组件想要把每一个阻止事件冒泡就这样写： <Dropdown overlay={ <Menu> <Menu.Item onClick={eve => { // 修改要做...
React 事件冒泡
neoveee的博客
01-27 4333
在React中，我们可以在创建element的时候，传入事件和处理函数，这些事件会被做为合成事件来处理，当然，有些时候，我们也需要定义原生事件，比如给document绑定事件。有些情况下，就需要通过阻止事件冒泡来实现预期的交互效果。下面是几个简单的demo Demo 比如有如下的代码： import React from 'react' class Demo1 extends React.Comp...
react中阻止事件冒泡
w799766的博客
09-10 2万+
直接看栗子： 页面上3个div，如图所示 1、在没有涉及到原生事件注册只有react事件时，用e.stopPropagation()阻止冒泡，代码如下： import React, { Component } from 'react'; import './App.css'; class App extends Component { handleClickTestBox = (...
React小笔记：事件冒泡问题
qq_45977489的博客
11-14 1066
具体详情可以自行去Chrome或stackOverflow上自行了解。react冒泡事件导致父元素也跟着触发。
react中 阻止冒泡
最新发布
05-31
所以阻止冒泡的方法可能和原生有些区别。用户可能已经知道原生的stopPropagation，但不确定在React里怎么用。根据引用里的内容，比如引用[1]提到在合成事件中可以用e.stopPropagation()或者e.preventDefault()，还有...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zoe_ya

如果你成功申请，可以打赏杯奶茶

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值