preventDefault & stopPropagation
我们先来看看这两个事件方法是如何定义的
preventDefault()
如果事件是可取消的,则 preventDefault() 方法会取消该事件,这意味着属于该事件的默认操作将不会发生。该方法不会阻止事件通过 DOM 进一步传播。请使用 stopPropagation() 方法来解决。
stopPropagation()
方法防止调用相同事件的传播。传播意味着向上冒泡到父元素或向下捕获到子元素。
简单来说
preventDefault 能够阻止 当前操作(如 click (en-US)
,scroll (en-US)
或 beforeunload (en-US)等
)触发 容器元素 及之上的 容器元素 等 的可取消的默认事件将不被触发 这里要理解的是两个东西
1,什么叫做默认事件,直观解释就是<a/>标签,默认事件就是打开一个链接。表单默认事件就是提交,以此类推,按钮默认是点击,等等
2,第二个是什么是可取消的默认事件,只是有这么个概念 event.cancelable 为 true 的可取消,false不可取消,目前来看我没遇到不可取消的,遇到后来补充吧
举例 解释这两个事件
执行代码,当点击【试就试】 时 弹出 ‘11’ ‘22’ 并 打开百度链接
只调用 preventDefault 后 弹出 ‘11’ ‘22’ 无法打开百度链接 a标签的默认事件被取消了
只调用 stopPropagation 后 弹出 ‘11’ 打开链接 弹出 ‘22’ 的事件和 ‘11’ 的事件属于相同事件,被阻止冒泡传递了
同时调用 preventDefault stopPropagation 后 只弹出 ‘11’ 两个方法 同时都生效了
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」