js事件冒泡、阻止事件冒泡以及阻止默认行为
大家好,我是IT修真院武汉分院web第17期的学员吴三水,一枚正直纯洁善良的web程序员。
今天给大家分享一下,修真院官网js(职业)任务四,深度思考中的知识点——js事件冒泡、阻止事件冒泡以及阻止默认行为
1.背景介绍
冒泡事件
故名思意,冒泡事件就像水底气泡浮到水面这一过程。即是事件从最底层逐个经过上面一级级事件的过程,就是冒泡事件。
默认事件
默认事件就是浏览器自己的行为,比如我们在点击a标签<a href="#">
时候,浏览器跳转到指定页面。比如当我们滚动鼠标时页面会向下滚动。
2.知识剖析
事件冒泡 :当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级,一直到window 。
事件冒泡传递的仅仅只是事件,并不会传递其他东西,如果父级没有绑定事件函数的话,就算传递了事件,也不会有什么表现,但是我们要清楚,事件是确确实实传递到了)
我们看下面代码:
//jsvar a = document.getElementById("123");var b = document.getElementById("321");a.addEventListener("click", function () {alert(1);})b.addEventListener("click", function () {alert(2);})//html<div id="123" style="display:inline-block;width:200px;height:200px;background: #ff0000;">我是父级元素<div id="321" style="display:inline-block;margin-left:200px;width:100px;height:100px;background:#000;color:#fff;">我是子级元素</div></div>
上面两个父子关系的div,然后分别加了点击事件,当我们在子div里面点击的时候,会发现弹出了一次1,接着又弹出了2,这说明点击的时候,不仅子div的事件被触发了,它的父级的点击事件也触发了,说明子div的将事件传递给了父div。这种就是冒泡事件。
3.常见问题
大多数时候,冒泡事件给我们带来的缺是困扰,比如下面这个:
//jsvar b = document.getElementById("321");b.addEventListener("click", function () {a.style.display = "block";})document.onclick = function () {a.style.display = "none";}//html<div id="123" style="display:inline-block;width:200px;height:200px;background: #ff0000;">点击除了#321外的地方我会显示</div><div id="321" style="display:inline-block;margin-left:200px;width:100px;height:100px;background:#000;color:#fff;">点击我#123会隐藏</div>
这个时候我们测试发现,怎么点击#321面板,#123面板都不会显示了,为什么呢?就是冒泡的原因,我们来分析下代码,当点击#321的时候,他会触发父亲级别的点击事件,然后一层一层的往上传,所以document的点击事件自然也被触发了,然后执行了自己身上的绑定事件,让#123面板消失。所以当你点击#321的时候首先,让粉丝面板显示,只是事件执行太快了,很快又执行了document的点击事件,让面板隐藏。 不信可以再两个事件之间加一个弹出,就可以测试。
4.解决方案
解决办法就是取消冒泡:
取消事件冒泡可以运用下面方法:
e.stopPropagation();
stopPropagation() 方法定义是:不再派发事件。所以直接调用的event 即可
window.event.cancelBubble = true;
这里的cancelBubble是 IE事件对象的属性定义:是否取消冒泡,设为true就可以了。
5.编码实战
function stopBubble(e) {//如果提供了事件对象,则这是一个非IE浏览器if ( e && e.stopPropagation )//因此它支持W3C的stopPropagation()方法e.stopPropagation();else//否则,我们需要使用IE的方式来取消事件冒泡window.event.cancelBubble = true;
}
//jsvar b = document.getElementById("321");b.addEventListener("click", function (e) {// 红色面板加事件a.style.display = "block";stopBubble(e);//这样就不会再冒泡给父级了 })document.onclick = function () {a.style.display = "none";}
6.扩展思考
如何阻止事件的默认行为?
阻止事件的默认行为可以运用下面方法:
1.e.preventDefault();
2.window.event.returnValue =false;
注:preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为。既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就没有默认行为,调用当然就无效了。什么元素有默认行为呢?如链接<a>
,提交按钮等。当Event 对象的 cancelable为false时,表示没有默认行为,这时即使有默认行为,调用preventDefault也是不会起作用的。
function stopDefault(e){if(e && e.preventDefault){ //判断浏览器是非IE浏览器e.preventDefault(); //非IE浏览器下使用preventDefault方法}else{//IE浏览器下令事件(window.event)的returnValue属性为false;window.event.returnValue = false;}return false;}//html<a href="http://www.baidu.com" id="test">百度</a>//jswindow.onload = function(){var test = document.getElementById('test');test.onclick = function(e){ //当单击此超链接时执行这个函数alert('URL:' + this.href + ',不会跳转');stopDefault(e);}}
7.参考文献
JavaScript事件——冒泡、捕获
js事件(Event)之(四)阻止默认操作
8.更多讨论
return false;
可以利用return false;来阻止 事件冒泡和静默行为。
注意:javascript的return false只会阻止默认行为,而用jQuery的话则既阻止默认行为又防止对象冒泡。
//原生js,只会阻止默认行为,不会停止冒泡
var a = document.getElementById("testA");
a.onclick = function(){return false;//当然 也阻止了事件本身
};
//jQuery,既阻止默认行为又停止冒泡
$("#testA").on('click',function(){return false;//当然 也阻止了事件本身
});
既然return false 和 e.preventDefault()都是一样的效果,那它们有区别吗?当然有。
仅仅是在HTML事件属性 和 DOM0级事件处理方法中 才能通过返回 return false 的形式组织事件宿主的默认行为。
感谢大家观看!
今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~
js事件冒泡、阻止事件冒泡以及阻止默认行为相关推荐
- JS阻止事件冒泡的3种方法,以及他们之间的不同
什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这 ...
- Js、Vue阻止事件冒泡行为
目录 Js阻止事件冒泡行为 Vue阻止事件冒泡行为 以下是Js阻止事件冒泡行为 event.stopPropagation() <!DOCTYPE html> <html lang= ...
- js阻止默认事件(a标签跳转),阻止事件冒泡
最近刚学习完js基础,今天发现对js的默认事件阻止以及阻止事件的冒泡有点忘记,于是写这篇文章算是做一个总结,也是加深一下印象. 1.阻止默认事件 在html中有很多自带默认事件的元素,很典型的例子:a ...
- 快速了解4种阻止事件冒泡的方法(原生js阻止,vue中使用修饰符阻止)
阻止事件冒泡的方法 前端结构 <div id="app"><div class="father-box" @click="click ...
- Js阻止事件冒泡和阻止默认事件
js中阻止事件冒泡,阻止默认事件的方法,理解stopPropagation(),preventDefault(),return false的区别 1.event.stopPropagation()方法 ...
- html 点击事件阻止冒泡,js阻止事件冒泡的两种方法
本篇文章给大家分享的内容是关于js阻止事件冒泡的两种方法 ,有需要的朋友可以参考一下 一.冒泡事件简介 当我们点击一个控件的时候,如果包括这个控件的父控件也有click事件,则会继续执行. 方法一:e ...
- JS、Vue、React阻止事件冒泡及阻止默认事件
JS阻止事件冒泡及阻止默认事件解决方案: 1.event.preventDefault -- 阻止默认 Event 接口的 preventDefault()方法,告诉user agent:如果此事件没 ...
- JS——事件冒泡与阻止事件冒泡
文章目录 前言 一.DOM事件流 1.什么是事件流呢? 2.事件流的两种方式 2.1 事件冒泡 2.2 事件捕获 2.3 DOM事件的3个阶段 二.事件对象 1.什么是事件对象 2.事件对象的使用 3 ...
- js 事件冒泡、阻止事件冒泡
JS事件流其中一种是冒泡事件,当一个元素被触发一个事件时,该目标元素的事件会优先被执行,然后向外传播到每个祖先元素,恰如水里的一个泡泡似的,从产生就一直往上浮,到在水平面时,它才消失.在这个过程中,如 ...
最新文章
- Linux导入ora-39070,impdp 导入数据报ORA-39002,ORA-39070,ORA-39002, ORA-39087
- std::function简介
- 性能超越最新序列推荐模型,华为诺亚方舟提出记忆增强的图神经网络
- UE4学习-在虚幻编辑器中打开VS的三种方式
- redis php ismember,Spring StringRedisTemplate 配置
- [Zhuan]Lua about
- 【2017年第1期】智慧城市多源异构大数据处理框架
- python中常见的漏洞_Python 中的 10 个常见安全漏洞,以及如何避免(上)
- java jdbc标签jsp_JDBC结合JSP使用(1)
- VS2017 远程调试linux(centos).net core
- python代码申请软件著作权_python自动化生成软件著作权的源代码
- i.MX6 交叉编译zlib、yasm、xvidcore、libpng、x264、jpegsrc、ffmpeg
- Spring中使用aop操作需要用到的aspectjweaver-1.8.7.jar包
- mysql 两阶段加锁_MySQL的两阶段加锁协议
- idea出现outdated version提示框
- Silverlight MMORPG WebGame游戏设计(五)-----Client的嫁妆
- Matlab一个错误引发的血案:??? Error using == str2num Requires string or character array input....
- 【Openai】介绍
- 计算机辅助设计在环境工程中的应用,试论计算机辅助设计在环境工程中的应用原稿(全文完整版)...
- 中国液晶玻璃市场供需调研与投资前景预测报告2022-2028年