事件的三个阶段:捕获阶段 目标阶段 冒泡阶段及防止冒泡和捕获
最恰当的比喻:可以想象画在一张纸上的一组同心圆,如果你把手指放在圆心上,那么你的手指指向的其实不是一个圆,而是纸上所有的圆。放到实际页面中就是,你点击一个按钮,事实上你还同时点击了按钮所有的父元素。
事件流阶段是
- 捕获阶段 (从根节点开始顺着目标节点构建一条事件路径,
即事件由页面元素接收,逐级向下,到具体的元素
) - 目标阶段 (到达目标节点,
即元素本身
) - 冒泡阶段 (从目标节点顺着捕获阶段构建的路径回去,
即跟捕获相反具体元素本身,逐级向上,到页面元素
)
!!!我觉得写一个demo更容易理解
思考:那是不是所有的事件都要经历这三个过程呢?
防止冒泡和捕获
- w3c的方法是
event.stopPropagation()
,IE则是使用event.cancelBubble = true
事件处理过程中,阻止了事件冒泡,但不会阻止默认行为
return false
事件处理过程中,阻止了事件冒泡,也阻止了默认行为
window.event? window.event.cancelBubble = true : e.stopPropagation();
return false
不仅阻止了事件往上冒泡,而且阻止了事件本身。event.stopPropagation()
则只阻止事件往上冒泡,不阻止事件本身。
取消默认事件
- w3c的方法是
e.preventDefault()
,IE则是使用e.returnValue = false
;
preventDefault
它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为
总结
- 当需要停止冒泡行为时,可以使用
function stopBubble(e) {
//如果提供了事件对象,则这是一个非IE浏览器
if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation();
else //否则,我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubble = true;
}
- 当需要阻止默认行为时,可以使用
//阻止浏览器的默认行为
function stopDefault( e ) { //阻止默认浏览器动作(W3C) if ( e && e.preventDefault ) e.preventDefault(); //IE中阻止函数器默认动作的方式 else window.event.returnValue = false; return false;
}
事件注意点
- event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等;
- event对象只在事件发生的过程中才有效。
function a(e){var e = (e) ? e : ((window.event) ? window.event : null); var e = e || window.event; // firefox下window.event为null, IE下event为null
}
总结参考与:http://caibaojian.com/javascript-stoppropagation-preventdefault.html
补充1:vue 防止冒泡和捕获
@click.stop
: 阻止事件冒泡@click.prevent
: 阻止事件默认行为@click.self
: 事件只作用在元素本身,而不是其子元素
<!-- 阻止单击事件继续传播 -->
<a @click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form @submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a @click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form @submit.prevent></form>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div @click.self="doThat">...</div>
补充2:React防止冒泡和捕获
由上述可知:原生JavaScript有这两种event.cancelBubble = true
或event.stopPropagation()
, 防止冒泡和捕获;但是React,使用event.cancelBubble
没有效果,return false
也没有效果
官方也说了,在React中不能使用return false
的方式阻止默认行为;
- 使用
event.stopPropagation()
成功干掉默认事件 - 还可以使用
event.preventDefault()
;
阻止冒泡: e.nativeEvent.stopImmediatePropagation()
方法
事件的三个阶段:捕获阶段 目标阶段 冒泡阶段及防止冒泡和捕获相关推荐
- [JS] 事件冒泡,阻止事件冒泡,事件的三个阶段(捕获,目标,冒泡)
事件冒泡 添加三个套在一起的div元素,在最里面放一个button,感受事件触发时从里到外"冒泡"的过程. 给每个div都加一个事件:点击时就alert test.html < ...
- JS事件的捕获和冒泡阶段
JS事件的捕获和冒泡阶段 这里介绍两个事件模型:IE事件模型与DOM事件模型 IE内核浏览器的事件模型是冒泡型事件(没有捕获事件过程),事件句柄的触发顺序是从ChildNode到ParentNode. ...
- 单阶段目标检测重要论文总结
文章目录 一.Yolov1 1.论文简介 2.检测原理 3.结构设计 4.疑难问题 5.论文总结 二.Yolov2 1.论文简介 2.更好.更快.更强 1)为什么更好? 2)为什么更快? 3)为什么更 ...
- CVPR2020-SEPC-单阶段目标检测提升4个点 | Scale-Equalizing Pyramid Convolution for Object Detection
启发应该是来源于SIFT中高斯金字塔带来的尺度不变性.论文出来很久了,感觉的确创新点很强,效果也是爆炸! 论文地址:http://openaccess.thecvf.com/content_CVPR_ ...
- 计算机视觉:单阶段目标检测模型YOLO-V3
计算机视觉:单阶段目标检测模型YOLO-V3 单阶段目标检测模型YOLO-V3 YOLO-V3 模型设计思想 产生候选区域 生成锚框 生成预测框 对候选区域进行标注 标注锚框是否包含物体 标注预测框的 ...
- 单阶段目标检测算法之YOLOv1详解
官方网站C语言版本:https://pjreddie.com/darknet/yolov1/ tensorflow版本的代码下载: https://github.com/hizhangp/yolo_t ...
- 深度学习中的两阶段目标检测
博主简介 博主是一名大二学生,主攻人工智能研究.感谢让我们在CSDN相遇,博主致力于在这里分享关于人工智能,c++,Python,爬虫等方面知识的分享. 如果有需要的小伙伴可以关注博主,博主会继续更新 ...
- 单阶段目标检测方法SSD介绍与分析
SSD目标检测算法,完整详细讲解 SSD(single shot multi-box detector) 1. 简介 2. 模型结构 backbone neck head SSD(single sho ...
- DOM事件流(支持冒泡与不支持冒泡事件)
DOM事件流(event flow )分为以下三个阶段: 事件捕获阶段 事件捕获(event capturing):意思是当鼠标点击或者触发dom事件的时候,浏览器会从这个事件的元素根节点开始一层一层 ...
- JS事件的三个阶段详解
JS事件的三个阶段详解 一.JS事件的三个阶段 二.冒泡阶段触发事件 三.捕获阶段触发事件 四.阻止冒泡行为 五.阻止事件冒泡和默认行为 一.JS事件的三个阶段 事件处理机制的三个阶段:1.捕获 2. ...
最新文章
- 服务器显示接口类型,查看服务器各接口卡情况的命令是:lspci
- 包(package)
- python能做游戏吗-python能开发游戏吗
- 关于SOA的四个基本观点 from MS
- 开发Eclipse插件
- 删除文件及文件夹命令
- spring用的很开心的标签(随时增加)
- 1064金明的预算方案
- java原生的ajax怎么写,用原生js实现 ajax方法
- (C/C++) string / *char / int 基本轉換
- [算法][包围盒]AABB简单类
- vs2008编写第一个Windows程序
- Makefile:Makefile中的调试打印方法
- Atitit httpclient feign使用总结RestTemplate Httpclient重要的功能 重试与超时 1.RedirectExec执行器的默认策略是,在接收到重定向错误码3
- 自媒体平台数据统计分析爬虫系列教程文档
- 用代理IP上网安全吗?
- 云计算机玩端游,拒绝万元显卡 云电脑玩端游又爽又省钱
- 今天看到一句觉得很牛逼的话与诸君共享
- 安装丰巢价格是多少_马桶后方1㎡好几万你不在意,丰巢涨价5毛钱你却斤斤计较...
- Word如何操作压缩图片?干货经验!怎么在Word中压缩图片?