React中防止事件冒泡：e.stopPropagation()

最新推荐文章于 2024-04-24 08:37:57 发布
最新推荐文章于 2024-04-24 08:37:57 发布
阅读量3.1k 收藏 1
点赞数 1
分类专栏： React 文章标签： 事件冒泡
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jal517486222/article/details/102609638
版权

当父子组件相互嵌套时，我们点击子组件时，子组件的点击事件会触发，但由于子组件被包含在父组件中，父组件的点击事件也会触发。为了防止事件冒泡，需要在子组件的点击事件中，写上e.stopPropagation()，就可以防止事件冒泡了?。

代码解释：

export default App{
   
	handleClick1=(e) => {
   
		// TODO
	}
	handleClick2=(e) =>
最低0.47元/天 解锁文章
爱玲姐姐
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
阻止事件e.stopPropagation()和e.preventDefault的区别
z2000ky的博客
12-07 1267
这两个方法可以单独使用，也可以组合使用，具体取决于你的需求。用于阻止事件的传播，而。用于阻止事件的默认行为。
冒泡事件阻止的案例 e.stopPropagation()
brucehongsen的博客
05-06 458
案例： 效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> &lt
React-事件机制
最新发布
唯见青山不见君
04-24 1246
React-事件机制
阻止事件冒泡 - e.stopPropagation()
一个小白，博文源于浏览各个大佬所得，感谢行业大佬们！
09-22 907
阻止事件冒泡 - e.stopPropagation()
关于js中事件的event.stopPropagation()方法的理解与举例说明
zhizhan888的博客
12-22 9616
这里有你想要的JavaScript事件的触发原理，stopPropagation()方法的使用，欢迎大家来讨论，一起相互学习，一起进步
js禁止事件冒泡e.stopPropagation();
杨咩咩
06-14 1万+
事件冒泡：当点击一个按钮后，此事件会一直向上传递，称为事件冒泡。可能会对父类活根类型事件造成影响。 例如：点击【按钮】弹出一个框，点击空白处，弹框消失。由于【按钮】是向上传递的，点击后会同时触发 点击空白处弹框消失事件。 js禁止事件冒泡方法：在【按钮】的触发框事件种禁止冒泡e.stopPropagation(); $.('btn').on('click', function(e){ ...
React合成事件(阻止冒泡stopImmediatePropagation)
LYFlied的博客
03-31 3385
- React组件类似onClick的事件是合成事件，本质上所有绑定是代理到document上的，所有绑定都会冒泡到document层去执行 二、React 合成事件 1.执行顺序 2.合成事件阻止冒泡 2.1e.stopPropagation 2.2 e.nativeEvent.stopImmediatePropagation 3.this指向问题 解决 4.传参 5. 事件池（React 17 不再使用事件池）
React冒泡和阻止冒泡的应用详解
10-14
问题在于，React的事件处理机制使得简单的`e.stopPropagation()`不能阻止事件冒泡到document级别，而`e.nativeEvent.stopPropagation()`又会导致React的事件处理器无法正常工作。 解决这个问题的正确方法是检查事件...
听说现在都考这些react面试题2022(收藏).pdf
12-15
要阻止事件冒泡，应使用`event.preventDefault()`而不是`event.stopPropagation()`，因为`event.stopPropagation()`在React中不会阻止合成事件的冒泡。 2. **React事件与HTML事件的区别**： - 事件名称命名规则：...
react 事件1
08-08
例如，`event.preventDefault()`可以阻止事件的默认行为，`event.stopPropagation()`则可以防止事件冒泡到父元素。 示例代码展示了如何在React中创建一个简单的组件`HelloWorld`，该组件包含一个输入框，并且监听`...
React中事件
09-13
另外，`event.stopPropagation()`可以阻止事件向上冒泡到父组件，但React默认已经阻止了事件冒泡，除非你手动设置`event.bubbles`为`true`。 ```jsx function Link() { const handleClick = (e) => { e....
e.stopPropagation()
a785589446的博客
04-01 1980
1. 定义和用法 不再派发事件。 终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。 2. 语法 event.stopPropagation() 3. 说明 　　该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个...
React stopPropagation失灵
大灰狼的小绵羊哥哥的博客
03-01 3294
前言 故事的开头是这样的：写业务的过程中，发现在React的onClick的回调函数里，用stopPropagation阻止绑定在document上的事件的时候，是没办法做到的，只可以阻止outClick事件的触发。详情如下： class ExampleApplication extends React.Component { componentDidMount() { ...
e.preventDefault()与e.stopPropagation()的区别
热门推荐
xiaobing_hope的专栏
02-16 3万+
e.stopPropagation()阻止事件冒泡 border='1'> 冒泡事件测试 冒泡事件测试2 我们先看这段js代码： $('table').on('click', function (e) { alert('table alert!'); }); $('tr').on(
js e.stopPropagation()阻止冒泡事件和e.preventDefault()阻止默认行为的应用场景
PrimaryColor
01-27 2711
一、阻止冒泡事件。 示例图： 通常，在很多用户界面中，都经常出现如上图所示，点击列表的时候，进入这条数据的详情页面，点击编辑的时候，弹窗编辑这条数据的信息。但是呢，做完之后，发现点击编辑的时候不仅仅会打开弹窗并且还会跳转页面，也就是两个事件都触发了，这个时候我们就需要在点击编辑的时候，阻止事件继续往上派发。 代码： $('.toDetail').on('click',function(){ console.log('跳转详情页面'); }); $('.editDetail').on('
消除点透事件（stopPropagation的妙用）
日常笔记/总结/系列知识梳理
03-27 2511
消除点透事件的具体代码如下： function stopEvent(){ var e=arguments.callee.caller.arguments[0]||event; if ( e &amp;&amp; e.stopPropagation ) { e.stopPropagation(); } else{ ...
利用jQuery的$.event.fix函数统一浏览器event事件处理
QC班长的博客
08-03 1070
function eventHandler(e)  {  var event = $.event.fix(e);  var elem = event.target;  alert('当前点击对象的标签名是:' + elem.tagName);  alert('当前点击按钮文本是:' + elem.value);  alert('pageX:' + event.pageX + ',pag
React 阻止事件冒泡失效、stopPropagation和stopImmediatePropagation分析，解决stopPropagation没有阻止冒泡问题
qssn的博客
08-20 8963
做开发中，React 和 JS 原生事件监听`addEventListener`混用了，因此发现了一个现象：React的阻止冒泡并没有阻止原生JS监听的事件触发。 下面代码的输出是（代码链接：https://codepen.io/Lik_Lit/pen/OJLROMW） “root click” “inner dom click” “document c......
react hooks禁止事件冒泡
09-15
React Hooks 本身并不会直接禁止事件冒泡，但你可以使用事件处理函数中提供的事件对象来阻止事件冒泡。 在 React 的事件处理函数中，事件对象会作为第一个参数传递给处理函数。你可以使用事件对象的 `stopPropagation` 方法来阻止事件冒泡。例如： ```jsx import React from 'react'; const handleClick = (event) => { event.stopPropagation(); // 其他处理逻辑 } const MyComponent = () => { return ( <div onClick={handleClick}> <button onClick={handleClick}>点击我</button> </div> ); }; ``` 在这个例子中，当点击按钮时，`handleClick` 函数被触发。通过调用 `event.stopPropagation()` 来阻止点击事件继续向父元素冒泡。 注意，使用 `stopPropagation` 只会阻止事件冒泡，而不会阻止事件的默认行为。如果你需要同时阻止默认行为，可以使用 `event.preventDefault()` 方法。 希望对你有所帮助！如有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值