return false;和e.preventDefault();的区别
更新时间：2010年07月11日 12:29:38 作者：
Have you ever seen those two things (in the title) being used in jQuery? Here is a simple
Have you ever seen those two things (in the title) being used in jQuery? Here is a simple example:
$("a").click(function() {
$("body").append($(this).attr("href"));
return false;
}
That code would append the href attribute as text to the body every time a link was clicked but not actually go to that link. The return false; part of that code prevents the browser from performing the default action for that link. That exact thing could be written like this:
$("a").click(function(e) {
$("body").append($(this).attr("href"));
e.preventDefault();
}
So what's the difference?
The difference is that return false; takes things a bit further in that it also prevents that event from propagating (or “bubbling up”) the DOM. The you-may-not-know-this bit is that whenever an event happens on an element, that event is triggered on every single parent element as well. So let's say you have a box inside a box. Both boxes have click events on them. Click on the inner box, a click will trigger on the outer box too, unless you prevent propagation. Like this:
演示地址:http://css-tricks.com/examples/ReturnFalse/
So in other words:
function() {
return false;
}
// IS EQUAL TO
function(e) {
e.preventDefault();
e.stopPropagation();
}
It's all probably a lot more complicated than this and articles like this probably explain it all a lot better.
复制代码 代码如下:
$("a").click(function() {
$("body").append($(this).attr("href"));
return false;
}
That code would append the href attribute as text to the body every time a link was clicked but not actually go to that link. The return false; part of that code prevents the browser from performing the default action for that link. That exact thing could be written like this:
复制代码 代码如下:
$("a").click(function(e) {
$("body").append($(this).attr("href"));
e.preventDefault();
}
So what's the difference?
The difference is that return false; takes things a bit further in that it also prevents that event from propagating (or “bubbling up”) the DOM. The you-may-not-know-this bit is that whenever an event happens on an element, that event is triggered on every single parent element as well. So let's say you have a box inside a box. Both boxes have click events on them. Click on the inner box, a click will trigger on the outer box too, unless you prevent propagation. Like this:
演示地址:http://css-tricks.com/examples/ReturnFalse/
So in other words:
复制代码 代码如下:
function() {
return false;
}
// IS EQUAL TO
function(e) {
e.preventDefault();
e.stopPropagation();
}
It's all probably a lot more complicated than this and articles like this probably explain it all a lot better.
参考：
1.The difference between ‘return false;' and ‘e.preventDefault();'
2.Event order
测试代码打包下载
您可能感兴趣的文章:
相关文章
js数组是js部分非常重要的知识，有时我们有这么个需求js数组删除指定元素,下面这篇文章主要给大家介绍了关于js删除数组中指定元素的几种方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-01-01
FileReader主要用于将文件内容读入内存,通过一系列异步接口,可以在主线程中访问本地文件,这篇文章主要给大家介绍了关于JavaScript中FileReader的相关资料,需要的朋友可以参考下2022-03-03
今天小编就为大家分享一篇layui的面包屑或者表单不显示的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
PixiJS是一个开源的基于web的渲染系统，为游戏、数据可视化和其他图形密集型项目提供了极快的性能。这篇文章主要带大家学习一下PixiJS是如何实现文字绘制的，希望对大家有所帮助2023-02-02
这篇文章主要介绍了深入浅析Extjs中store分组功能的使用方法的相关资料,需要的朋友可以参考下2016-04-04
这篇文章主要为大家详细介绍了javascript实现简易计算器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这篇文章主要介绍了JS 正则表达式验证密码、邮箱格式的实例代码,需要的朋友可以参考下2018-10-10
标签元素的显示或隐藏在使用中还是挺频繁的，下面有个不错的示例，大家可以参考下，或许有所帮助2013-09-09
这篇文章主要介绍了十分钟教你上手ES2020新特性，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
javascript连接mysql与php通过odbc连接任意数据库的实例
下面小编就为大家分享一篇javascript连接mysql与php通过odbc连接任意数据库的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
最新评论