js阻止冒泡事件发生(react)

已于 2022-12-01 14:16:27 修改
阅读量834 收藏
点赞数
分类专栏： 前端 文章标签： react
于 2022-11-29 10:45:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/corruptwww/article/details/128093576
版权
本文介绍了JavaScript中用于事件处理的两个关键函数：event.preventDefault()和event.stopPropagation()。event.preventDefault()用于阻止默认事件，如链接的跳转或表单的提交，而event.stopPropagation()则用于阻止事件冒泡或捕获，确保事件只在其当前处理元素上执行，不会向上级元素传递。理解这两个函数对于精确控制页面交互至关重要。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

其实就两个函数

event: MouseEvent
event.preventDefault();
event.stopPropagation();

事件冒泡和事件捕获

event.stopPropagation()
事件冒泡和事件捕获都是为了解决页面中事件流（事件发生顺序）的问题。
事件冒泡会从最内层的元素开始发生，一直向上传播，直到document对象。
事件捕获会从最外层的元素开始发生，从document对象开始，一直向下传播。
stopPropagation支持两种模式，默认是阻止事件冒泡。

取消默认事件

event.preventDefault()
默认事件指的是<a href="">，<input type="submit">这类有默认行为的标签，通过点击可以跳转或提交。我们给这类标签绑定一个点击事件，设置事件对象的preventDefault()方法就可以阻止默认事件的发生.

如何在 React 中阻止事件冒泡
ByteGlide的博客
09-30 3533
事件冒泡是指在 Web 开发中当一个元素触发某个事件时，该事件会向上层元素传播，直到到达文档根节点。在 React 中，我们可以使用一些技术手段来取消或阻止事件冒泡的传播。在 React 中，事件传播分为捕获阶段和冒泡阶段。通过上述三种方法，我们可以在 React 中取消或阻止事件冒泡的传播。根据具体的需求，选择合适的方法来处理事件冒泡问题。React 中的事件处理函数会接收到一个事件对象，我们可以调用该对象的。方法来取消事件的继续传播。另一种取消事件冒泡的方法是使用事件对象的。方法来阻止事件冒泡的传播。
react取消捕获_React 阻止默认事件和阻止冒泡
weixin_39880328的博客
12-21 2193
首先有这样一段代码，很久很久以前有这样一个故事，这要从远古时代说起fn和fn1是一对父子div是parent，span是childrenfn是子，fn1是父最近在学react首先...fn(ev){alert('children')}fn1(ev){alert('parent')}render() {return children}...一般情况下，原生js写法，阻止冒泡或者阻止默认事件，原生Ja...
React中阻止事件冒泡的问题详析
01-19
前言 最近在研究react、redux等，网上找了很久都没有完整的答案，索性自己整理下，这篇文章就来给大家介绍了关于React阻止事件冒泡的相关内容，下面话不多说了，来一起看看详细的介绍吧 在正式开始前，先来看看 JS 中事件的触发与事件处理器的执行。 JS 中事件的监听与处理 事件捕获与冒泡 DOM 事件会先后经历 捕获 与 冒泡 两个阶段。捕获即事件沿着 DOM 树由上往下传递，到达触发事件的元素后，开始由下往上冒泡。 IE9 及之前的版本只支持冒泡                   |  A  —————–|–|—————–  | Parent         |  |   
React-阻止事件冒泡
Lewis_1993的博客
06-13 1226
React 合成事件系统中提供了一个 e.nativeEvent.stopImmediatePropagation()方法用来阻止冒泡，不过需要注意的是，阻止 React 事件冒泡的行为只能用于 React 合成事件系统中，且没办法阻止原生事件的冒泡。反之，在原生事件中的阻止冒泡行为，却可以阻止 React 合成事件的传播。...
React 中阻止事件冒泡的问题
weixin_30892037的博客
04-06 905
在正式开始前，先来看看 JS 中事件的触发与事件处理器的执行。 JS 中事件的监听与处理 事件捕获与冒泡 DOM 事件会先后经历 捕获 与 冒泡 两个阶段。捕获即事件沿着 DOM 树由上往下传递，到达触发事件的元素后，开始由下往上冒泡。 IE9 及之前的版本只支持冒泡 | A -----------------|--|--...
React 事件冒泡
neoveee的博客
01-27 4257
在React中，我们可以在创建element的时候，传入事件和处理函数，这些事件会被做为合成事件来处理，当然，有些时候，我们也需要定义原生事件，比如给document绑定事件。有些情况下，就需要通过阻止事件冒泡来实现预期的交互效果。下面是几个简单的demo Demo 比如有如下的代码： import React from 'react' class Demo1 extends React.Comp...
如何在React中阻止事件冒泡？
最新发布
Code365
05-17 608
在React中，阻止事件冒泡可以通过合成事件的stopPropagation()方法实现。基本用法是在子组件的事件处理函数中调用e.stopPropagation()，以阻止事件冒泡到父组件。然而，在特殊场景下需要注意以下几点：1. 当原生事件与合成事件共存时，阻止冒泡可能无效，建议统一使用一种事件类型；2. 如果父组件在捕获阶段监听事件（onClickCapture），子组件阻止冒泡无效，需在捕获阶段也调用stopPropagation()。此外，应避免过度依赖事件冒泡，优先使用组件间显式通信（如prop
React冒泡和阻止冒泡的应用详解
10-14
在React中，由于其虚拟DOM的事件处理机制，事件冒泡和阻止冒泡的行为与原生JavaScript略有不同。 首先，React通过事件池（Event Pooling）优化性能，它将事件处理器绑定到文档的根节点，而不是每个DOM元素。这意味...
react组件的事件冒泡
qq_55139096的博客
04-17 309
事件处理程序还将捕获来自你的组件可能具有的任何子级的事件。我们说事件在树上 “冒泡” 或 “传播”：它从事件发生的地方开始，然后沿着树上升。
React小笔记：事件冒泡问题
qq_45977489的博客
11-14 1014
具体详情可以自行去Chrome或stackOverflow上自行了解。react冒泡事件导致父元素也跟着触发。
juqery 阻止默认事件发生
大任的网络专栏
08-08 695
.click(function( event ) { event.preventDefault(); });
react取消捕获_react中的错误处理
weixin_39972519的博客
12-30 499
解决的两个问题收集错误自定义事件实现try...catch错误捕获功能同时增加Pause on exceptions功能react\packages\shared\ReactErrorUtils.js用于存储错误以及是否发生错误的状态// Used by Fiber to simulate a try-catch.let hasError: boolean = false;let caughtEr...
学习react过程中遇到的JavaScript 的事件冒泡问题
a1009698473的博客
08-29 221
用react实现实现点击图片和背景时分别切换不同的效果。
react取消捕获_react 异常捕获
weixin_39904268的博客
12-21 181
参考这些人的脑洞可真大...用户的执行函数const f = () => JSON.parse();const test = () => {console.log("test 1");f();console.log("test 2");};使用try-catch 必须开启两个才能在异常位置停下来 const wrapProd = (fn) => {try {fn();} catc...
python求数列数量积_python – 可变交互的计算(矩阵中向量的点积)
weixin_39633891的博客
12-11 254
方法#1使用np.triu_indices的一个解决方案是 –r,c = np.triu_indices(arr.shape[1])out = np.concatenate((arr,arr[:,r]*arr[:,c]),axis=1)方法#2更快切割 –def pairwise_col_mult(a):n = a.shape[1]N = n*(n+1)//2idx = n + np.concat...
React学习-event.preventDefault()方法的简单介绍
Biu_Destiny的博客
07-12 3084
React学习-event.preventDefault()方法的简单介绍 react官方文档中有这么一段: 在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault。例如，传统的 HTML 中阻止表单的默认提交行为，你可以这样写： <form onsubmit="console.log('You clicked submit.'); return false"> <button type="submit"&gt
React event.preventDefault使用方法
weixin_43814775的博客
08-10 3259
event.preventDefault 定义和用法： 取消事件的默认动作 简单看一下下面代码： class NameForm extends React.Component { constructor(props) { super(props); this.state = {value: ''}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmi
很好的阻止了事件的发生_前端笔试知识点：阻止冒泡
weixin_39813200的博客
11-27 216
我们先来看一道BOSS直聘上面的选择题：你知道这道题选什么吗？-----------没错，选D如果你知道选D的原因，那你就不用往下面看了，节约你宝贵的时间；如果你不知道，那么你就要了解一个JS的知识点：阻止冒泡： 众所周知：当点击了一个元素，这个元素的所有祖先元素都会被触发，这一过程称之为事件冒泡。 阻止冒泡有三种方法： 1 event.stopPropagation()方法：阻...
React深度解析：阻止事件冒泡的策略
React事件处理器会在浏览器原生事件之前执行，因此你可以在React事件处理器内部调用`event.stopPropagation()`来阻止后续的原生事件处理。在上面的例子中，如果父级元素也绑定了点击事件处理函数，那么在调用`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值