关于js中return false、event.preventDefault()和event.stopPropagation()
在平时项目中,如果遇到需要阻止浏览器默认行为,大家经常会用return false;和event.preventDefault()来阻止,但对它俩的区别还是有些一知半解,于是看了文档,查了些资料,在此总结下它俩的区别,顺便带上event.stopPropagation()一起区分下。
一、原生js中:
关于return false和preventDefault:
在W3C Document Object Model Events Specification1.3版本中提到过:
The EventListener interface is the primary method for handling events. Users implement the EventListener interface
and register their listener on an EventTarget using the AddEventListener method. The users should also remove their
EventListener from its EventTarget after they have completed using the listener.
handleEvent
This method is called whenever an event occurs of the type for which the EventListener interface was registered.
同时,在1.2.4. Event Cancelation 文档中也提到:
Cancelation is accomplished by calling the Event's preventDefault method. If one or more EventListeners call preventDefault
during any phase of event flow the default action will be canceled.
HTML5 Section 6.1.5.1 of the HTML Spec规范定义如下:
Otherwise
If return value is a WebIDL boolean false value, then cancel the event.
也就是说,事件处理程序的返回值只对通过属性注册的处理程序才有意义,如果我们未通过addEventListener()函数来绑定事件的话,若要禁止默认事件,用的就是return false; 但如果要用addEventListener()或者attachEvent()来绑定,就要用preventDefault()方法或者设置事件对象的returnValue属性。
而H5规范中为什么要OtherWise来强调return false,因为规范中有指出在mouseover等几种特殊事件情况下,return false;并不一定能终止事件。所以,在实际使用中,我们需要尽量避免通过return false;的方式来取消事件的默认行为。
二、在jQuery中:
这里需要先了解下事件传递机制:
例如鼠标被按下后,mousedown事件被触发。
事件先从document->ancestor element->...->parent->event.target(在此元素上按下的鼠标)->parent->...->ancestor element->document.
事件走了一个循环,从documet到event.target再回到document,从event.target到document的过程叫做冒泡。
event.stopPropagation(); // 事件停止冒泡到,即不让事件再向上传递到document,但是此事件的默认行为仍然被执行,如点击一个链接,调用了event.stopPropagation(),链接仍然会被打开。
event.preventDefault(); // 取消了事件的默认行为,如点击一个链接,链接不会被打开,但是此事件仍然会传递给更上一层的先辈元素。
在事件处理函数中使用 return false; 相当于同时调用了event.stopPropagation()和event.preventDefault(),事件的默认行为不会被执行,事件也不会冒泡向上传递。
此时在jQuery中,return false;就不是简单的覆盖面和规范的问题了。在jQuery事件处理函数中调用return false;相当于同时调用了preventDefault和stopPropagation方法,这会导致当前元素的事件无法向上冒泡,在事件代理模式下,会导致问题。
比如,我有一个div容器,里面是 几个a标签,它们的href里分别存储了url地址,这个url被用来动态的载入到下面的div#content中,这里为了简单演示,就只把url字符串写入到div#content中:
<div id="container">
<a href="/content1.html">content1</a>
<a href="/content2.html">content2</a>
<div id="content">我会根据点击链接的url不同而改变的</div>
</div>
// 为container下的所有a标签绑定click事件处理函数
$("#container").click(function (e) {
if (e.target.nodeName == "A") {
$("#content").html(e.target.href);
}
});
// 再为a标签绑定click事件处理函数,阻止默认事件
$("#container a").click(function () {
return false;
});
上面的代码运行后,虽然阻止了a标签的点击默认行为,但同时停止了冒泡事件,导致其外层的父元素无法检测到click事件,所以jQuery中需要明白return false;和event.preventDefault()二者的区别。
即尽量不要用return false;来阻止event的默认行为。
附:
event.preventDefault()方法并不被ie支持,在ie下需要用window.event.returnValue = false; 来实现。一般都是这样写,代码如下:
function stopDefault( e ) {
if ( e && e.preventDefault ){
e.preventDefault(); //支持DOM标准的浏览器
} else {
window.event.returnValue = false; //IE
}
}
也可以处理ie || firefox下图片拖动的问题。
document.onmousemove=function(ev){
var oEvent=ev||event;
if(oEvent.preventDefault){oEvent.preventDefault();}
else{oEvent.returnValue=false;}
}
关于js中return false、event.preventDefault()和event.stopPropagation()的更多相关文章
- jQuery js 中return false,e.preventDefault(),e.stopPropagation()的区别(事件冒泡)
有时候遇到冒泡事件很烦人,真的..... 1.e.stopPropagation()阻止事件冒泡 <head> <title></title> <script ...
- js中 return false
一.返回控制与函数结果, 语法为:return 表达式; 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果 二.返回控制, 无函数结果,语法为:return; 在大多数情况下,为事件 ...
- js中return false,return,return true的使用方法及区别
起首return作为返回keyword,他有下面两种返回体式格式 1.返回把握与函数成果 语法为:return 表达式; 语句停止函数履行,返回调用函数,而且把表达式的值作为函数的成果 2.返回把握无 ...
- js中return false,return,return true的用法及区别
首先return作为返回关键字,他有以下两种返回方式 1.返回控制与函数结果 语法为:return 表达式; 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果 2.返回控制无函数结果 语 ...
- js中return false; jquery中需要这样写:return false(); Jquery 中循环 each的用法 for循环
js中return false; jquery中需要这样写:return false(); Jquery 中循环 each的用法 $(".progressName").each(f ...
- js中return false,return,return true的用法及差别
起首return作为返回关键字,他有以下两种返回体式格式 1.返回把握与函数成果 语法为:return 表达式; 语句停止函数履行,返回调用函数,并且把表达式的值作为函数的成果 2.返回把握无函数成果 ...
- jQuery中return false,e.preventDefault(),e.stopPropagation()的区别
e.stopPropagation()阻止事件冒泡 <head> <title></title> <script src="Scripts/jQue ...
- js中return、return true、return false的区别
一.返回控制与函数结果, 语法为:return 表达式; 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果 二.返回控制, 无函数结果,语法为:return; 在大多数情况下,为事件 ...
- js中return;、return true、return false;区别
一.返回控制与函数结果, 语法为:return 表达式; 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果 二.返回控制, 无函数结果,语法为:return; 在大多数情况下,为事件 ...
随机推荐
- ThinkPHP3.1快速入门(3)查询语言
http://www.thinkphp.cn/info/115.html 介绍 ThinkPHP内置了非常灵活的查询方法,可以快速的进行数据查询操作,查询条件可以用于读取.更新和删除等操作,主要涉及到 ...
- ubuntu修改grub2
转自修改系统启动项 grub2配置的方法 ubuntu 在早期的Ubuntu中,使用Grub作为系统的启动引导程序,想修改系统启动项非常简单,只要用gedit打开系统菜单设定文件( sudo gedi ...
- vlc
源码下载地址:http://download.videolan.org/pub/videolan/vlc/ 编译依赖: sudo apt-get install liblua5.2-dev sudo ...
- [译]GotW #1: Variable Initialization 续
Answer 2. 下面每行代码都做了什么? 在Q2中,我们创建了一个vector<int>且传了参数10和20到构造函数中,第一种情况下(10,20),第二种情况是{10, 20}. 它 ...
- pcDuino汉化方法
1,打开终端:2,在终端输入命令 sudo apt-get update 更新一下软件源3, 输入命令下载中文支持包 sudo apt-get install language-pack-gnome- ...
- WordPress Bradesco Gateway插件‘falha.php’跨站脚本漏洞
漏洞名称: WordPress Bradesco Gateway插件‘falha.php’跨站脚本漏洞 CNNVD编号: CNNVD-201309-451 发布时间: 2013-09-26 更新时间: ...
- Java I/O学习(一)
写作目的 自学Java,Java中流的概念比较复杂,故专门作一整理.期望开始学习的童鞋,看完本文后对Java流有一个大致的认识.主要分三个小篇: 一.概述.输入/输出字节流 二.输入/输出字符流.装饰 ...
- android学习——项目的目录结构
学习开发之前要了解工程目录下的文件夹下文件的用意,是以HelloWorld为例: 1.HelloWorld项目的目录结构 1.1.src文件夹 1.2.gen文件夹 1.3.Android 2.1文件 ...
- HDU-1390 Binary Numbers
http://acm.hdu.edu.cn/showproblem.php?pid=1390 Binary Numbers Time Limit: 2000/1000 MS (Java/Others) ...
- Linux系统下使用crontab添加计划任务的方法
在服务器中添加定期执行的任务,在很多情况下是非常必要的.比如,每天清理一次/tmp目录下的文件;没几分钟检查某一守护进程是否正常等等.这样计划任务就显得尤为方便.下面将介绍如何在Linux系统中 ...