return false;和e.preventDefault();的区别


Posted in Javascript onJuly 11, 2010

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:
return false;和e.preventDefault();的区别
演示地址: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

测试代码打包下载

Javascript 相关文章推荐
jQuery(js)获取文字宽度(显示长度)示例代码
Dec 31 Javascript
jQuery实现tag便签去重效果的方法
Jan 20 Javascript
JavaScript之Object类型介绍
Apr 01 Javascript
超详细的javascript数组方法汇总
Nov 21 Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 Javascript
AngularJS删除路由中的#符号的方法
Sep 20 Javascript
基于jQuery实现选项卡效果
Jan 04 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
Mar 14 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 Javascript
JavaScript原型对象原理与应用分析
Dec 27 Javascript
JS实现图片幻灯片效果代码实例
May 21 Javascript
基于jQuery的树控件实现代码(asp.net+json)
Jul 11 #Javascript
js 模拟气泡屏保效果代码
Jul 10 #Javascript
浅谈javascript的数据类型检测
Jul 10 #Javascript
jquery nth-child()选择器的简单应用
Jul 10 #Javascript
SWFObject 2.1以上版本语法介绍
Jul 10 #Javascript
加载jQuery后$冲突的解决办法
Jul 09 #Javascript
在javascript将NodeList作为Array数组处理的方法
Jul 09 #Javascript
You might like
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
解决php中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
php可生成缩略图的文件上传类实例
2014/12/17 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
php获得刚插入数据的id 的几种方法总结
2018/05/31 PHP
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
2015/11/03 Javascript
使用JQuery实现智能表单验证功能
2016/03/08 Javascript
浅谈javascript中的constructor
2016/06/08 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
2016/11/21 Javascript
微信小程序 数据交互与渲染实例详解
2017/01/21 Javascript
运用jQuery写的验证表单(实例讲解)
2017/07/06 jQuery
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
ES6下子组件调用父组件的方法(推荐)
2018/02/23 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
ES6实现图片切换特效代码
2020/01/14 Javascript
vue 使用async写数字动态加载效果案例
2020/07/18 Javascript
Python使用struct处理二进制的实例详解
2017/09/11 Python
python中lambda()的用法
2017/11/16 Python
python简单操作excle的方法
2018/09/12 Python
Django实现跨域请求过程详解
2019/07/25 Python
python GUI库图形界面开发之PyQt5打开保存对话框QFileDialog详细使用方法与实例
2020/02/27 Python
在HTML5中如何使用CSS建立不可选的文字
2014/10/17 HTML / CSS
生产部统计员岗位职责
2014/01/05 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
2015中秋节慰问信范文
2015/03/23 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
入团介绍人意见范文
2015/06/04 职场文书
新人入职感言
2015/07/31 职场文书
严以修身专题学习研讨会发言材料
2015/11/09 职场文书
《秋思》教学反思
2016/02/23 职场文书
2019暑假学生安全口号
2019/06/27 职场文书
Redis实现分布式锁的五种方法详解
2022/06/14 Redis