前端知识点（1）——preventDefault和stopPropagation

itYuMi itYuMi 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 600+累计阅读 641平均单平台 已同步平台 CSDN 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄5年
关注
原创 最新推荐文章于 2025-11-02 10:27:42 发布 641 阅读 AI 写同款· GEO 优化 ›
关于event.preventDefault()的用法 event.preventDefault() ；ES6中的对象解构赋值。 阅读详情

【preventDefault】
（1）在表单中，点击"提交"，即可提交表单，如果我们想要阻止这种表单的默认行为，即可使用preventDefault
（2）a标签等的点击链接，点击即可跳到我们想要的URL路径，如果我们想要阻止这种链接的跳转，也可使用preventDefault

【stopPropagation】
防止调用相同事件的传播，也可以说是起到阻止js事件冒泡的作用

标签
#前端
本内容遵循 CC 4.0 BY-SA 版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
前端js阻止事件冒泡 title: 前端js阻止事件冒泡 date: 2018-4-21 20:27:24 tags: [js] categories: js keywords: 前端js阻止事件冒泡 记录在项目中遇到的问题         1.event.stopPropagation()方法 这是阻止事件的冒泡方法，不让事件向documen... 阅读详情

相关推荐

preventDefault与stopPropagation的作用

如题，本篇文章讨论preventDefault和stopPropagation二者的作用，首先，先理解一下二者的字面意思： 一、preventDefault，prevent是动词，意为“防止，阻止”；Default是名词，有“系统默认值”的意思，preventDefault在js中的意思就是“阻止系统默认（行为）”。 二、stopPropagation，stop是动词，意为“中止”；Pr...

u010565037的博客 1万+

HTML:浏览器的默认行为--阻止浏览器的默认行为

览器存在自己的默认行为，默认行为是浏览器的默认初始值。有一些浏览器行为是在事件处理程序执行前发生的，也就是说这些默认行为是无法取消的，需要人为去屏蔽浏览器的默认行为。

weixin_74100422的博客 1106

怎么不让html网页自动跳转,javascript怎么禁止跳转页面？

JavaScript中可以通过在点击跳转页面时调用preventDefault()方法来禁止页面跳转。preventDefault()方法可以取消事件的默认动作。如果在点击时候调用preventDefault()方法执行其他行为，通过此方法禁止页面跳转：function stopDefault(e) {if (e && e.preventDefault)e.preventDefau...

weixin_42520025的博客 7522

React中的stopPropagation和preventDefault

场景原生事件React合成事件传播阶段处理绑定捕获事件名加Capture后缀（如阻止所有阶段的传播（包括到React根节点）仅阻止合成事件传播，不影响原生事件传播阻止默认行为，不影响传播同原生，需显式调用（无效）事件绑定方式直接绑定到DOM元素委托到根节点，通过组件函数分发理解这些差异的核心是：React合成事件是“模拟”原生事件的抽象层，其传播机制依赖原生事件的冒泡，但行为上做了统一和限制，以适配组件化开发需求。

2401_89241768的博客 889

event中的stopPropagation和preventDefault

1、DOM事件模型；2、事件默认行为；3、stopPropagation；4、preventDefault；5、栗子分析

1513

前端新手——stopPropagation(),preventDefault(),return false的区别

return false， stopPropagation() , preventDefault()

W_l_l的博客 3480

preventDefault 和 stopPropagation

概述 以前开发项目的时候，总是分不清楚 preventDefault 和 stopPropagation，每次都是用 @click.stop试一下，不能就用@click.prevent试一下。今天来好好总结一下这2个东西，记录下来，供以后开发时参考，相信对其他人也有用。 参考资料：preventDefault()、stopPropagation()、return false 之间的区别 ...

weixin_30595035的博客 183

阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别

今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开， 2.event.preventDefault()方法 这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父...

积少成多 10万+

stopPropagation, preventDefault 和 return false 的区别

大家好，我是前端队长Daotin，想要获取更多前端精彩内容，关注我(全网同名)，解锁前端成长新姿势。以下正文：stopPropagation阻止事件的冒泡和捕获。因为事件可以在各层级的节点中传递, 不管是冒泡还是捕获, 有时我们希望事件在特定节点执行完之后不再传递, 可以使用事件对象的 stopPropagation() 方法。preventDefault阻止浏览器默认行为。浏览器的默认行为：对于一些特定的事件，浏览器有它默认的行为。例如：点击链接会进行跳转点击鼠标右键会呼出浏览器右键菜单填写表单时按回车会

前端队长Daotin 215

js中preventDefault 与stopPropagation 及 stopImmediatePropagation的区别

原文：https://codeplanet.io/preventdefault-vs-stoppropagation-vs-stopimmediatepropagation/ Three similar and often confused methods. Let’s explore the different between: Event.preventDefault(

每天进步一点点 1363

js中preventDefault和stopPropagation两个方法

首先讲解一下js中preventDefault和stopPropagation两个方法的区别： preventDefault方法的起什么作用呢？我们知道比如<a href="http://www.baidu.com">百度</a>,这是html中最基础的东西，起的作用就是点击百度链接到http://www.baidu.com,这是属于<a>...

aidingkui7609的博客 111

vue 中 event.stopPropagation() 和event.preventDefault() 使用

vue 中 event.stopPropagation() 和event.preventDefault() 使用 1.event.stopPropagation()方法 这是阻止事件的冒泡方法，不让事件向document上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开， 2.event.pre...

梓鸿 5356

preventDefault()、stopPropagation()、return false 之间的区别

“return false”之所以被误用的如此厉害，是因为它看起来像是完成了我们交给它的工作，浏览器不会再将我们重定向到href中的链接，表单也不会被继续提交，但这么做到底有什么不对呢？ 可能在你刚开始学习关于jQuery事件处理时，看到的第一个例子就是关于如何阻止浏览器执行默认行为，比如下面这段演示click事件的代码 &lt;pre style="margin: 0px; white...

忘川 476

JQuery中event的preventDefault和stopPropagation介绍

event.preventDefault()阻止默认事件行为的触发。 event.stopPropagation()防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数。 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head>...

diaguo7961的博客 88

阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false；的区别

1.event.stopPropagation()方法 这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开。 //js: handleParentClick=()=>{ console.log('这是父层div点击事件'); }; handletClick=()=>{ console.l...

Dronwing fish 926

event.stopPropagation()和event.preventDefault()

阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别           / 编辑 删除 今天来看看前端的冒泡和事件默认事件...

祥哥的说 1万+

【转】stopPropagation, preventDefault 和 return false 的区别

因为有父, 子节点同在, 因为有监听事件和浏览器默认动作之分. 使用 JavaScript 时为了达到预期效果经常需要阻止事件和动作执行. 一般我们会用到三种方法, 分别是 stopPropagation(), preventDefault()和 return false. 它们之间有什么区别, 该何时使用呢? 将在本文中进行讲解. 术语 监听事件, 在在节点上能被监听...

175
上一篇： 前端BUG（2）——自动启动浏览器，并修改浏览器默认配置
下一篇： 前端BUG（3）——Uncaught SyntaxError: Identifier ‘pluginnamearr‘ has already been标识符“插件名称器”已经被声明
点赞 1
评论 0
书签 书签 0
itYuMi
itYuMi
博客等级 码龄5年 1粉丝 6原创
+ 关注
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值