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’   两个方法 同时都生效了

 

posted @   南巷清风--大R  阅读(56)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示