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

已于 2022-12-01 14:16:27 修改
阅读量728 收藏
点赞数
分类专栏： 前端 文章标签： react
于 2022-11-29 10:45:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/corruptwww/article/details/128093576
版权

其实就两个函数

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

事件冒泡和事件捕获

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

取消默认事件

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

秋叶原の黑猫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react取消捕获_React 阻止默认事件和阻止冒泡
weixin_39880328的博客
12-21 2115
首先有这样一段代码，很久很久以前有这样一个故事，这要从远古时代说起fn和fn1是一对父子div是parent，span是childrenfn是子，fn1是父最近在学react首先...fn(ev){alert('children')}fn1(ev){alert('parent')}render() {return children}...一般情况下，原生js写法，阻止冒泡或者阻止默认事件，原生Ja...
React 阻止默认事件和阻止冒泡
Fluoxet_i_ne的博客
07-16 941
给 a 标签添加一个事件 阻止默认事件 e.preventDefault(); class view extends Component { onAtag(e) { // 阻止默认事件 放置跳转 e.preventDefault(); console.log("烦烦烦滚滚"); } render() { return ( <div> <a href='true' onClick={(e) => { this.on.
React中阻止事件冒泡的问题详析
01-19
前言 最近在研究react、redux等，网上找了很久都没有完整的答案，索性自己整理下，这篇文章就来给大家介绍了关于React阻止事件冒泡的相关内容，下面话不多说了，来一起看看详细的介绍吧 在正式开始前，先来看看 JS 中事件的触发与事件处理器的执行。 JS 中事件的监听与处理 事件捕获与冒泡 DOM 事件会先后经历 捕获 与 冒泡 两个阶段。捕获即事件沿着 DOM 树由上往下传递，到达触发事件的元素后，开始由下往上冒泡。 IE9 及之前的版本只支持冒泡                   |  A  —————–|–|—————–  | Parent         |  |   
React-阻止事件冒泡
Lewis_1993的博客
06-13 1167
React 合成事件系统中提供了一个 e.nativeEvent.stopImmediatePropagation()方法用来阻止冒泡，不过需要注意的是，阻止 React 事件冒泡的行为只能用于 React 合成事件系统中，且没办法阻止原生事件的冒泡。反之，在原生事件中的阻止冒泡行为，却可以阻止 React 合成事件的传播。...
一文彻底搞懂浏览器事件机制、事件委托、事件冒泡、事件循环、Event Loop、react事件池封装、事件触发过程详解
最新发布
liangzhenmeng的博客
07-25 2万+
事件是用户操作网页时发生的交互动作，比如 click/move， 事件除了用户触发的动作外，还可以是文档加载，窗口滚动和大小调整。事件被封装成一个 event 对象，包含了该事件发生时的所有相关信息（ event 的属性）以及可以对事件进行的操作（ event 的方法）
React 中阻止事件冒泡的问题
weixin_30892037的博客
04-06 846
在正式开始前，先来看看 JS 中事件的触发与事件处理器的执行。 JS 中事件的监听与处理 事件捕获与冒泡 DOM 事件会先后经历 捕获 与 冒泡 两个阶段。捕获即事件沿着 DOM 树由上往下传递，到达触发事件的元素后，开始由下往上冒泡。 IE9 及之前的版本只支持冒泡 | A -----------------|--|--...
React 事件冒泡
neoveee的博客
01-27 4186
在React中，我们可以在创建element的时候，传入事件和处理函数，这些事件会被做为合成事件来处理，当然，有些时候，我们也需要定义原生事件，比如给document绑定事件。有些情况下，就需要通过阻止事件冒泡来实现预期的交互效果。下面是几个简单的demo Demo 比如有如下的代码： import React from 'react' class Demo1 extends React.Comp...
React冒泡和阻止冒泡的应用详解
10-14
在React中，由于其虚拟DOM的事件处理机制，事件冒泡和阻止冒泡的行为与原生JavaScript略有不同。 首先，React通过事件池（Event Pooling）优化性能，它将事件处理器绑定到文档的根节点，而不是每个DOM元素。这意味...
React小笔记：事件冒泡问题
qq_45977489的博客
11-14 926
具体详情可以自行去Chrome或stackOverflow上自行了解。react冒泡事件导致父元素也跟着触发。
juqery 阻止默认事件发生
大任的网络专栏
08-08 659
.click(function( event ) { event.preventDefault(); });
react取消捕获_react中的错误处理
weixin_39972519的博客
12-30 463
解决的两个问题收集错误自定义事件实现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 161
用react实现实现点击图片和背景时分别切换不同的效果。
react取消捕获_react 异常捕获
weixin_39904268的博客
12-21 147
参考这些人的脑洞可真大...用户的执行函数const f = () => JSON.parse();const test = () => {console.log("test 1");f();console.log("test 2");};使用try-catch 必须开启两个才能在异常位置停下来 const wrapProd = (fn) => {try {fn();} catc...
react组件的事件冒泡
qq_55139096的博客
04-17 222
事件处理程序还将捕获来自你的组件可能具有的任何子级的事件。我们说事件在树上 “冒泡” 或 “传播”：它从事件发生的地方开始，然后沿着树上升。
python求数列数量积_python – 可变交互的计算(矩阵中向量的点积)
weixin_39633891的博客
12-11 209
方法#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 2710
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 3166
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 187
我们先来看一道BOSS直聘上面的选择题：你知道这道题选什么吗？-----------没错，选D如果你知道选D的原因，那你就不用往下面看了，节约你宝贵的时间；如果你不知道，那么你就要了解一个JS的知识点：阻止冒泡： 众所周知：当点击了一个元素，这个元素的所有祖先元素都会被触发，这一过程称之为事件冒泡。 阻止冒泡有三种方法： 1 event.stopPropagation()方法：阻...
react阻止事件冒泡
06-10
在 React 中，可以使用事件对象的 `stopPropagation()` 方法来阻止事件冒泡。例如，当点击某个元素时，可以在该元素的 onClick 事件处理程序中调用 `stopPropagation()` 方法，以防止该事件被传递给父元素。代码示例...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值