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

最新推荐文章于 2024-04-16 00:30:00 发布
最新推荐文章于 2024-04-16 00:30:00 发布
阅读量582 收藏
点赞数 1
CC 4.0 BY-SA版权
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/itYuMi/article/details/123308066
本文介绍了如何在JavaScript中使用`preventDefault`阻止表单的默认提交行为和`stopPropagation`阻止事件向上冒泡，帮助开发者更好地控制网页交互。

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

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

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

itYuMi
关注
前端面试话术集锦第 15 篇：高频考点（React常考进阶知识点）
念兮为美
09-13 473
HOC是什么？相比mixins有什么优点？React的思想存在函数式编程，高阶组件和高阶函数是相同意思。我们实现个函数，传入一组件，然后在函数内部再实现一函数去扩展传入的组件，最后返回一新的组件，这就是高阶组件的概念，作用就是为了更好的复用代码。HOC和Vue中的mixins作用一致，且在早期React也是使用mixins的方式。JSX上写的事件并没有绑定在对应的真实DOM上，而是通过事件代理的方式，将所有的事件统一绑定在document上。这样的方式不仅减少内存消耗，还能在组件挂载销毁时统一订阅和移除事件
juejin小册前端面试2一面 2：JS-Web-API 知识点与高频考题解析
VAN
01-18 125
</body><other><a></a><b></b></other>
js中的preventDefault与stopPropagation详解
12-12
首先讲解一下js中preventDefault和stopPropagation两个方法的区别：preventDefault方法的起什么作用呢？我们知道比如<a>百度</a>,这是html中最基础的东西，起的作用就是点击百度链接到http://www.baidu.com,这是属于<a>标签的默认行为，而preventDefault方法就是可以阻止它的默认行为的发生而发生其他的事情。看一段代码大家就明白了： 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
js中的preventDefault和stopPropagation
weizuqing的专栏
01-07 266
首先讲解一下js中preventDefault和stopPropagation两个方法的区别： preventDefault方法的起什么作用呢？我们知道比如百度,这是html中最基础的东西，起的作用就是点击百度链接到http://www.baidu.com,这是属于标签的默认行为，而preventDefault方法就是可以阻止它的默认行为的发生而发生其他的事情。看一段代码大家就...
前端页面中event.preventDefault()方法作用
Clarence_Pang的博客
12-10 1669
event.preventDefault()是通知浏览器不执行与事件关联的默认动作 举个栗子 $(obj).click(function(event){ event.preventDefault(); });
阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return fal的区别...
weixin_33774615的博客
11-11 1943
今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开， 2.event.preventDefault()方法 这是阻止默认事件的方法，调用此方法是，连接不会被打开，...
前端HTML+CSS+JS+AJAX知识点
Zidee的博客
02-02 1767
微笔记
JavaScript操作canvas制作前端H5小游戏——Flappy Bird
热门推荐
kang921022的博客
02-08 1万+
游戏查看源码和素材下载博主学习前端一年多一点，还是个新手，不过勇于尝试，才能不断进步，如果代码质量不好，欢迎提意见，下面开始讲解，首先贴张游戏界面图：游戏使用canvas画图制作，分析游戏确定有这几个元素： 天空背景不动 小鸟上下移动，左右不动 地板和水管向左移动（造成小鸟向前移动的错觉） canvas画图是覆盖画图，所以画图顺序很重要，它的api我就不多说了，只有用到以下内容：<!-- html代
前端三件套知识点
二氧化硅.的博客
01-11 2896
前端三件套知识点
preventDefault与stopPropagation的作用
Peak Xin's Blog
11-21 2012
preventDefault() 方法 定义： 取消事件的默认动作。 说明： 该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果 type 属性是 “submit”，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作...
preventDefault 和 stopPropagation
weixin_30595035的博客
08-25 130
概述 以前开发项目的时候，总是分不清楚 preventDefault 和 stopPropagation，每次都是用 @click.stop试一下，不能就用@click.prevent试一下。今天来好好总结一下这2个东西，记录下来，供以后开发时参考，相信对其他人也有用。 参考资料：preventDefault()、stopPropagation()、return false 之间的区别 ...
preventDefault 和 stopPropagation 的区别
asing1elife's blog
09-11 2607
preventDefault 和 stopPropagation 的区别 在使用 JS 阻止默认动作时，通常会使用 preventDefault 或 stopPropagation ，但两者存在一定区别 更多精彩 更多技术博客，请移步 asing1elife’s blog preventDefault 如下方法中，.training-name-input 存在与一个表单...
JS - e.preventDefault()与e.stopPropagation()
kelly0721的博客
02-10 2383
事件冒泡 e.stopPropagation()阻止事件冒泡 事件冒泡，就是字元素的onClick事件被触发时，会同时触发父元素的 onClick 事件 一般来讲，click事件的顺序应该是p -> div -> body -> html -> document 所以，以下代码的触发顺序是 children -> parent -> body 如果 e.st...
preventDefault()和stopPropagation()的联系和区别
最新发布
g841805的博客
04-16 1154
都是event方法，都能阻止事件发生。
Js阻止事件冒泡与阻止默认事件
qsj0606的博客
04-23 2535
Js阻止事件冒泡与阻止默认事件 1、event.stopPropagation()方法 event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开。 提示：请使用 event.isPropagationStopped() 方法来检查指定的事件上是否调用了该方法。 2、event.preventDefault()方法 取消事件的默认动作。该方法将通
preventDefault()方法和stopPropagation()方法的使用
aa574202228的专栏
07-07 1302
1、preventDefault()方法        preventDefault()方法是用来阻止浏览器默认事件。                                                                                                                                
preventdefault与stoppropagation详解
09-01
preventDefault是一个用于取消事件的默认行为的方法。在事件的处理函数中调用该方法，可以阻止浏览器执行事件所关联的默认行为。比如，当点击一个链接时，浏览器会默认打开链接对应的页面，但如果在点击事件的处理函数中调用了preventDefault方法，那么浏览器就不会打开链接对应的页面了。 stopPropagation是一个用于停止事件传播的方法。当一个元素上发生了一个事件，例如点击事件，如果该元素的父元素也绑定了相同的事件，那么点击事件就会继续传播到父元素上。但是在事件的处理函数中调用stopPropagation方法，可以停止事件的进一步传播。换句话说，事件就不会再传播到父元素上了。 两者的区别在于作用的对象不同。preventDefault是用于取消事件的默认行为，而stopPropagation是用于停止事件的传播。 需要注意的是，在使用preventDefault和stopPropagation时要慎重。因为有些默认行为是用户期望的，比如点击链接打开新页面，取消这些默认行为可能会影响用户体验。而停止事件传播可能会导致其他元素上的事件无法被触发。因此，在使用这两个方法时要根据实际需求权衡利弊，确保不会对用户产生负面影响。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值