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

最新推荐文章于 2024-08-29 10:00:00 发布
原创 最新推荐文章于 2024-08-29 10:00:00 发布 · 607 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

本文介绍了如何在JavaScript中使用`preventDefault`阻止表单的默认提交行为和`stopPropagation`阻止事件向上冒泡，帮助开发者更好地控制网页交互。

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

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

itYuMi
关注
前端面试话术集锦第 15 篇：高频考点（React常考进阶知识点）
念兮为美
09-13 514
HOC是什么？相比mixins有什么优点？React的思想存在函数式编程，高阶组件和高阶函数是相同意思。我们实现个函数，传入一组件，然后在函数内部再实现一函数去扩展传入的组件，最后返回一新的组件，这就是高阶组件的概念，作用就是为了更好的复用代码。HOC和Vue中的mixins作用一致，且在早期React也是使用mixins的方式。JSX上写的事件并没有绑定在对应的真实DOM上，而是通过事件代理的方式，将所有的事件统一绑定在document上。这样的方式不仅减少内存消耗，还能在组件挂载销毁时统一订阅和移除事件
juejin小册前端面试2一面 2：JS-Web-API 知识点与高频考题解析
VAN
01-18 171
</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”
JavaScript中的`event.preventDefault()`和`event.stopPropagation()`有什么区别？
最新发布
Good_tea_h的博客
08-29 1557
作用阻止事件的默认行为阻止事件冒泡到父元素使用场景- 阻止表单提交- 阻止链接跳转- 阻止其他元素的默认行为- 避免不必要的事件处理- 控制事件传播路径影响范围只影响当前事件的默认行为只影响当前事件的冒泡过程是否阻止默认行为是否是否阻止事件冒泡否是是否需要额外调用若需阻止冒泡，则需额外调用若需阻止默认行为，则需额外调用。
js中的preventDefault和stopPropagation
weizuqing的专栏
01-07 279
首先讲解一下js中preventDefault和stopPropagation两个方法的区别： preventDefault方法的起什么作用呢？我们知道比如百度,这是html中最基础的东西，起的作用就是点击百度链接到http://www.baidu.com,这是属于标签的默认行为，而preventDefault方法就是可以阻止它的默认行为的发生而发生其他的事情。看一段代码大家就...
前端HTML+CSS+JS+AJAX知识点
Zidee的博客
02-02 1790
微笔记
Java程序员必备前端面试知识点汇总
Java程序员应熟悉事件绑定的多种方式（内联事件、DOM0级、DOM2级addEventListener），理解事件冒泡与捕获机制，掌握阻止默认行为（preventDefault）和阻止事件传播（stopPropagation）的方法，这对于编写健壮的前端...
JavaScript操作canvas制作前端H5小游戏——Flappy Bird
热门推荐
kang921022的博客
02-08 1万+
游戏查看源码和素材下载博主学习前端一年多一点，还是个新手，不过勇于尝试，才能不断进步，如果代码质量不好，欢迎提意见，下面开始讲解，首先贴张游戏界面图：游戏使用canvas画图制作，分析游戏确定有这几个元素： 天空背景不动 小鸟上下移动，左右不动 地板和水管向左移动（造成小鸟向前移动的错觉） canvas画图是覆盖画图，所以画图顺序很重要，它的api我就不多说了，只有用到以下内容：<!-- html代
前端页面中event.preventDefault()方法作用
Clarence_Pang的博客
12-10 1708
event.preventDefault()是通知浏览器不执行与事件关联的默认动作 举个栗子 $(obj).click(function(event){ event.preventDefault(); });
阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return fal的区别...
weixin_33774615的博客
11-11 1983
今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开， 2.event.preventDefault()方法 这是阻止默认事件的方法，调用此方法是，连接不会被打开，...
preventDefault与stopPropagation的作用
Peak Xin's Blog
11-21 2128
preventDefault() 方法 定义： 取消事件的默认动作。 说明： 该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果 type 属性是 “submit”，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作...
preventDefault 和 stopPropagation
weixin_30595035的博客
08-25 151
概述 以前开发项目的时候，总是分不清楚 preventDefault 和 stopPropagation，每次都是用 @click.stop试一下，不能就用@click.prevent试一下。今天来好好总结一下这2个东西，记录下来，供以后开发时参考，相信对其他人也有用。 参考资料：preventDefault()、stopPropagation()、return false 之间的区别 ...
preventDefault 和 stopPropagation 的区别
asing1elife's blog
09-11 2720
preventDefault 和 stopPropagation 的区别 在使用 JS 阻止默认动作时，通常会使用 preventDefault 或 stopPropagation ，但两者存在一定区别 更多精彩 更多技术博客，请移步 asing1elife’s blog preventDefault 如下方法中，.training-name-input 存在与一个表单...
event中的stopPropagation和preventDefault
07-26 1473
1、DOM事件模型；2、事件默认行为；3、stopPropagation；4、preventDefault；5、栗子分析
JS - e.preventDefault()与e.stopPropagation()
kelly0721的博客
02-10 2555
事件冒泡 e.stopPropagation()阻止事件冒泡 事件冒泡，就是字元素的onClick事件被触发时，会同时触发父元素的 onClick 事件 一般来讲，click事件的顺序应该是p -> div -> body -> html -> document 所以，以下代码的触发顺序是 children -> parent -> body 如果 e.st...
preventDefault()和stopPropagation()的联系和区别
g841805的博客
04-16 1333
都是event方法，都能阻止事件发生。
preventDefault()方法和stopPropagation()方法的使用
aa574202228的专栏
07-07 1337
1、preventDefault()方法        preventDefault()方法是用来阻止浏览器默认事件。                                                                                                                                
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值