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 相关文章推荐
关于JavaScript与HTML的交互事件
Apr 12 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
Mar 08 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
js实现股票实时刷新数据案例
May 14 Javascript
Angular实现的进度条功能示例
Feb 18 Javascript
vue-router中scrollBehavior的巧妙用法
Jul 09 Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
Aug 22 Javascript
vue基础之事件v-onclick="函数"用法示例
Mar 11 Javascript
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
JS实现电脑虚拟键盘的操作
Jun 24 Javascript
使用vue构建多页面应用的示例
Oct 22 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
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
推荐几款用 Sublime Text 开发 Laravel 所用到的插件
2014/10/30 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
php-msf源码详解
2017/12/25 PHP
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
jquery操作checkbox实现全选和取消全选
2014/05/02 Javascript
教你用jquery实现iframe自适应高度
2014/06/11 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
js实现简单选项卡与自动切换效果的方法
2015/04/10 Javascript
使用javascript提交form表单方法汇总
2015/06/25 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
jQuery使用$.ajax进行即时验证实例详解
2015/12/11 Javascript
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
Canvas实现微信红包照片效果
2018/08/21 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
2019/02/27 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
2020/02/01 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
2020/04/28 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
Vue3为什么这么快
2020/09/23 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
[05:08]顺网杯ISS-DOTA2赛歌 少女偶像Lunar青春演绎
2013/12/05 DOTA
Python写的贪吃蛇游戏例子
2014/06/16 Python
python爬取51job中hr的邮箱
2016/05/14 Python
详解Python中的各种转义符\n\r\t
2019/07/10 Python
史上最详细的Python打包成exe文件教程
2021/01/17 Python
kmart凯马特官网:美国最大的打折零售商和全球最大的批发商之一
2016/11/17 全球购物
MADE荷兰:提供原创设计师家具
2018/04/03 全球购物
英文翻译的自我评价语句
2013/10/04 职场文书
护理自我鉴定范文
2013/10/06 职场文书
高中生的自我评价
2014/03/04 职场文书
房屋买卖协议书范本
2014/04/10 职场文书
技术股东合作协议书
2014/12/02 职场文书
教师个人年终总结
2015/02/11 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python
SpringCloud项目如何解决log4j2漏洞
2022/04/10 Java/Android