e.preventDefault()和e.stopPropagation()以及return false的作用和区别
前段时间开发中，遇到一个父元素和子元素都有事件时，发现会出现事件冒泡现象，虽然知道ev.stopPropagation()和ev.preventDefault()其中一个是阻止事件冒泡和阻止默认行为，却不知ev.preventDefault()和ev.stopPropagation()以及return false之间的详细区别，于是闲了就学了一下。
在此之前，先复习一下事件机制。
dom事件通常会有三种情况：
捕获阶段：从外向里依次查找元素。
目标阶段：从当前事件源本身的操作
冒泡阶段：从内到外依次触发相关的行为。
如下图可以得知标准事件触发情况（借Lazymr博主的图一用）：
从图中可知，有些情况我们不让父元素触发子元素所带来的事件。所以ev.preventDefault()和ev.stopPropagation()以及return false就出来了。
ev.preventDefault()：
这个是阻止默认行为触发，什么是默认行为，即标签属性本身具备的功能。就是类似与a标签所带的href和submit所带的提交等等。
对于默认行为，浏览器优先实行事件函数后实行默认行为。
<body>
<a href="http://www.baidu.com" onclick="btn()">点击</a>
<script type="text/javascript">
document.querySelector('a').onclick = function (ev) {
alert('警告！');
ev.preventDefault();
}
</script>
</body>
出现的结果是：只弹出警告的弹窗，之后没有跳转到百度页面。
兼容性处理
function stopDefault( e ) {
if ( e && e.preventDefault ){
e.preventDefault(); //支持DOM标准的浏览器
} else {
window.event.returnValue = false; //IE
}
}
ev.stopPropagation()
阻止事件冒泡。什么是事件冒泡；上一个图片已经解释清楚了。事件可以在各层级的节点中传递，不管是冒泡还是捕获，有时我们希望事件在特定节点执行完之后不再传递，可以使用事件对象的 ev.stopPropagation() 方法。
<body>
<br />
<div id="parent" onclick="console.log(this.id)">
<p>parent</p>
<div id="child" onclick="doSomething(this,event);">
<p>child</p>
</div>
</div>
<script type="text/javascript">
function doSomething(obj, ev){
console.log(obj.id)
}
</script>
</body>
点击child的结果会触发事件冒泡。结果如下：
如果要实现只出现child，那么就要用到ev.stopPropagation() 了。
<body>
<br />
<div id="parent" onclick="console.log(this.id)">
<p>parent</p>
<div id="child" onclick="doSomething(this,event);">
<p>child</p>
</div>
</div>
<script type="text/javascript">
function doSomething(obj, ev){
console.log(obj.id);
ev.stopPropagation();
}
</script>
</body>
结果如下：点击child只出现child。
这个有兼容性， IE8 及以前版本都不支持，IE 的事件对象包含特有的属性 cancelBubble，只要将它赋值为 true 即可阻止事件继续。ie下可以用这个ev.cancelBubble=true。
可以封装成一个函数：
function stopBubble(ev) {
var ev=ev||window.event
if(window.event) {
ev.cancelBubble=true; //ie阻止冒泡
}else {
ev.stopPropagation(); //其他浏览器组织冒泡
}
}
return false
包含特有退出执行 return false 之后的所有触发事件和动作都不会被执行，有时候 return false 可以用来替代 stopPropagation() 和 preventDefault()来阻止默认行为发生和冒泡。
<body>
<br />
<div>
<a href="http://www.baidu.com">点击</a>
</div>
<script type="text/javascript">
document.querySelector('a').onclick=function(){
alert('警告');
return false;
}
</script>
</body>
结果是 只出现警告的弹窗，但没有跳转到百度页面。
如果将return false放到alert('警告')前面 。结果会是什么都不显示，原因是return false提到了终止事件和默认行为。
return false和ev.stopPropagation()的区别是：
return false不仅阻止了冒泡而且还阻止了事件本身。
ev.stopPropagation()只阻止了冒泡。
注意：虽然return false能够替代前两个阻止默认行为和冒泡，但是也有其他作用，比如终止循环等等，所以会有意想不到的结果，因此能用ev.preventDefalut()来阻止默认行为和ev.stopPropagation()阻止冒泡最好，提高代码的高效性。
e.preventDefault()和e.stopPropagation()以及return false的作用和区别的更多相关文章
- How to correctly use preventDefault(), stopPropagation(), or return false; on events
How to correctly use preventDefault(), stopPropagation(), or return false; on events I’m sure this h ...
- Javascript return false的作用（转）
大多数情况下,为事件处理函数返回false,可以防止默认的事件行为.例如,默认情况下点击一个<a>元素,页面会跳转到该元素href属性指定的页.return false 就相当于终止符,r ...
- JS preventDefault ，stopPropagation ，return false
所谓的事件有两种:监听事件和浏览器对特殊标签元素的默认行为事件.监听事件:在节点上被监听的事件操作,如 select节点的change事件,a节点的click事件.浏览器的默认事件:特定页面元素上带的 ...
- js 阻止事件冒泡和默认行为 preventDefault、stopPropagation、return false
preventDefault: preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为.既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就 ...
- preventDefault()、stopPropagation()、return false 之间的区别
“return false”之所以被误用的如此厉害,是因为它看起来像是完成了我们交给它的工作,浏览器不会再将我们重定向到href中的链接,表单也不会被继续提交,但这么做到底有什么不对呢? 可能在你刚开 ...
- preventDefault()、stopPropagation()、return false 的区别
preventDefault() e.preventDefault()阻止浏览器默认事件 stopPropagation() e.stopPropagation()阻止冒泡 return false ...
- 阻止事件冒泡两种方式：event.stopPropagation();和return false;
jQuery提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function (event) { ...
- jquery中return false的作用
jquery中的return false既阻止默认事件,又阻止冒泡: 在原生的js中,return false只有一个功能,那就是阻止默认事件. <!DOCTYPE html> <h ...
- e.preventDefault() e.stopPropagation()和return false的区别
e.preventDefault(); //阻止事件的默认行为,比如a标签的转向,但不阻止事件的冒泡传播e.stopPropagation() //阻止事件的冒泡传播,但不阻止其默认行为returne ...
随机推荐
- BZOJ 1086: [SCOI2005]王室联邦 [树上分块]
portal 题意: 树分成若干块大小在$[s,3s]$之间,每块有一个根(可以不在块内),所有点到根路径上的点都必须在块内 据说这是一个保证了块大小直径个数的科学分块方法,貌似只有本题有用 我错了 ...
- BZOJ 2463: [中山市选2009]谁能赢呢？[智慧]
明和小红经常玩一个博弈游戏.给定一个n×n的棋盘,一个石头被放在棋盘的左上角.他们轮流移动石头.每一回合,选手只能把石头向上,下,左,右四个方向移动一格,并且要求移动到的格子之前不能被访问过.谁不能移 ...
- DaemonSet 典型应用场景 - 每天5分钟玩转 Docker 容器技术（129）
Deployment 部署的副本 Pod 会分布在各个 Node 上,每个 Node 都可能运行好几个副本.DaemonSet 的不同之处在于:每个 Node 上最多只能运行一个副本. DaemonS ...
- python爬站长之家写一个信息搜集器
前言:不知道写什么好,绕来绕去还是写回爬虫这一块. 之前的都爬了一遍.这次爬点好用一点的网站. 0x01: 自行备好requests模块 目标站:http://tool.chinaz.com/ 0x2 ...
- qt程序启动画面
- table内容强制换行
为防止文字过长而撑坏表格,一般我们需要通过css使td中内容强制换行.分别给table和td加一条样式即可实现: <meta charset="utf-8"> < ...
- devexpress entity framework 与 asp.net mvc的坑
最近在做一个使用ASP.NET MVC DEVEXPRESS和EF的OA模块 遇到不少问题这里记录一下: 1 如果项目中存在多个上下文类(DBContext的派生类),在做数据迁移的时候需要在不同目录 ...
- VUE学习笔记之vue cli 构建项目
一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...
- hdu2846 Repository 字典树（好题）
把每个字符串的所有子串都加入字典树,但在加入时应该注意同一个字符串的相同子串只加一次,因此可以给字典树的每个节点做个记号flag--表示最后这个前缀是属于那个字符串,如果当前加入的串与它相同,且二者属 ...
- HDU5992 - Finding Hotels
原题链接 Description 给出个二维平面上的点,每个点有权值.次询问,求所有权值小于等于的点中,距离坐标的欧几里得距离最小的点.如果有多个满足条件的点,输出最靠前的一个. Solution 拿 ...