js的stopPropagation()、cancelBubble、preventDefault()、return false的分析
个人笔记，如有错误，望指出。
事件冒泡，举个列子：
<li>
<a href='http://www.baidu.com'>点击a</a>
</li>
<script>
$('li').click(function () {
alert('点击了li');
});
$('a').click(function () {
alert('点击了a');
});
</script>
当你点击a的时候，会先弹出‘点击了a’，再弹出‘点击了li’，最后跳转到百度。简单理解就是先执行子元素的事件，再执行父元素的事件，跟事件捕获相反。
有些时候，我们不希望发生父元素的事件，只发生子元素的事件，这时候就需要阻止事件冒泡。分析一下事件冒泡，顺便分析一下阻止浏览器默认行为的一些方法：
1、event.stopPropagation();（阻止冒泡）
2、event.cancelBubble = true;（阻止冒泡）
3、event.preventDefault();（阻止浏览器默认行为）
4、return false;（有很多行为）
一、event.stopPropagation();
<script>
$('li').click(function () {
alert('点击了li');
});
$('a').click(function (event) {
alert('点击了a');
event.stopPropagation();
});
</script>
完美阻止了li元素的冒泡，并且不会影响a的事件。效果是：先弹出‘点击了a’，然后跳转百度
注：之前看到说是不兼容IE8及一下，亲测IE6以上没问题，如有错，望指出。
二、event.cancelBubble = true;
<script>
$('li').click(function () {
alert('点击了li');
});
$('a').click(function () {
alert('点击了a');
console.log(event);
event.cancelBubble = true;
});
</script>
使用cancelBubble需要注意：
event事件是窗口的MouseEvent，此处console.log打印的是：MouseEvent {isTrusted: true, screenX: 55, screenY: 90, clientX: 55, clientY: 29…}
。效果跟上面的是一样：先弹出‘点击了a’，然后跳转百度。刚刚测的时候，好像兼容性也还好。
三、event.preventDefault();
<script>
$('li').click(function () {
alert('点击了li');
});
$('a').click(function (event) {
alert('点击了a');
event.preventDefault();
});
</script>
执行后的效果：先弹出‘点击了a’，再弹出‘点击了li’，但是，不执行跳转！不执行跳转！不执行跳转！
其实，default英文意思是默认的，想想不难理解，页面中，除了执行监听事件还会触发浏览器默认动作; 执行监听事件在前, 触发浏览器默认动作在后。
preventDefault并不是阻止事件冒泡，只是阻止浏览器的默认动作。而stopPropagation跟cancelBubble只是阻止事件冒泡，并没有阻止
浏览器的默认动作。当我们希望阻止事件冒泡的同时，也阻止浏览器的默认动作时，就可以2者都一起使用，如下代码：
<script>
$('li').click(function () {
alert('点击了li');
});
$('a').click(function (event) {
alert('点击了a');
console.log(event);
event.stopPropagation();
event.preventDefault();
});
</script>
效果是：只弹出‘点击了a’，并不跳转百度链接，也不弹出‘点击了li’。
四、最后的一个return false;
<script>
$('li').click(function () {
alert('点击了li');
});
$('a').click(function () {
alert('点击了a');
return false;
});
</script>
执行效果：只弹出‘点击了a’，并不跳转百度链接，也不弹出‘点击了li’。跟（stopPropagation+preventDefault）是一个效果。
退出执行, return false 之后的所有触发事件和动作都不会被执行. 有时候 return false 可以用来替代stopPropagation() 和
preventDefault(), 比如上面的例子。
值得注意的一点：有人认为 return false = stopPropagation() + preventDefault()，其实是错的。 return false 不但阻止事件，
还可以返回对象, 跳出循环等... 方便地一刀切而不够灵活, 滥用易出错。
贴一下本博客的html的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡</title>
</head>
<body>
<ul>
<li>
<a href='#'>点击a</a>
</li>
</ul>
<script src="jquery-1.11.3.min.js"></script>
<script>
$('li').click(function () {
alert('点击了li');
});
$('a').click(function (event) {
alert('点击了a');
console.log(event);
event.stopPropagation();
// event.cancelBubble = true;
event.preventDefault();
// return false;
});
</script>
</body>
</html>
补充：谢谢博友指出，对于return false;我说明的比较少，其实return false并不是事件冒泡，本文讲的是跟事件冒泡有关的内容，return false在某种情况下也能实现。
因为return false不但阻止了事件，也阻止了浏览器的默认行为，就像一个终止符，也常常用它来阻止提交表单或者继续执行下面的代码，并且只在当前函数下
有用，return false执行了以下行为：
1、执行event.preventDefault(); 阻止浏览器的默认行为；
2、event.stopPropagation(); 阻止冒泡行为；
3、停止回调函数执行并立即返回。
写文章之前，我看到这样一句话：“cancelBubble用于ie的阻止冒泡事件，event.stopPropagation（）用于firefox和chrome等其他浏览器。”。我不
知道现在还是不是这样子，测试的时候兼容是好的，所以就没有说明这一点。当然，为了保险起见，博友帮我封了一个函数，感谢！文中不对之处还望指出，多多学习。
//阻止冒泡事件
function stopBubble(e){
if(e && e.stopPropagation){
// 非IE浏览器
e.stopPropagation();
}else{
//IE浏览器
window.event.cancelBubble=true;
}
}
同理，如果想阻止浏览器的默认事件
//阻止浏览器默认行为
function stopDefault(e){
//标准浏览器
if(e && e.preventDefault){
e.preventDefault();
}
//个别IE
else{
window.event.returnValue=fale;
return false;
}
}
js的stopPropagation()、cancelBubble、preventDefault()、return false的分析的更多相关文章
- 原生js中stopPropagation,preventDefault,return false的区别
1.stopPropagation:阻止事件的冒泡,但不阻止事件的默认行为. 最好莫过于用例子说明: <div id='div' onclick='alert("div") ...
- stopPropagation(), preventDefault() , return false 事件
因为有父, 子节点同在, 因为有监听事件和浏览器默认动作之分. 使用 JavaScript 时为了达到预期效果经常需要阻止事件和动作执行. 一般我们会用到三种方法, 分别是 stopPropagati ...
- 【前端】stopPropagation, preventDefault, return false的区别
e.stopPropagation()阻止事件冒泡或者捕获 因为事件可以在各层级的节点中传递, 不管是冒泡还是捕获, 有时我们希望事件在特定节点执行完之后不再传递, 可以使用事件对象的 stopPro ...
- event.stopPropagation()、event.preventDefault()与return false的区别
做小demo时经常用到return false来取消默认事件,但一直不是很懂它和preventDefault()等的区别,今天查了查文档和大神们的博客,在这里对相关知识点做一个总结 首先开门见山,总结 ...
- jQuery js 中return false,e.preventDefault(),e.stopPropagation()的区别(事件冒泡)
有时候遇到冒泡事件很烦人,真的..... 1.e.stopPropagation()阻止事件冒泡 <head> <title></title> <script ...
- preventDefault()、stopPropagation()、return false 的区别
preventDefault() e.preventDefault()阻止浏览器默认事件 stopPropagation() e.stopPropagation()阻止冒泡 return false ...
- js中 return false
一.返回控制与函数结果, 语法为:return 表达式; 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果 二.返回控制, 无函数结果,语法为:return; 在大多数情况下,为事件 ...
- js中return、return true、return false的区别
一.返回控制与函数结果, 语法为:return 表达式; 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果 二.返回控制, 无函数结果,语法为:return; 在大多数情况下,为事件 ...
- js中return；、return true、return false;区别
一.返回控制与函数结果, 语法为:return 表达式; 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果 二.返回控制, 无函数结果,语法为:return; 在大多数情况下,为事件 ...
随机推荐
- MySQL操作使用
这只是一些简单的数据库命令,作为新手记录一下,以供后面查询使用. 查询服务器版本号和当前日期: select version(), current_date; 一个命令通常用一个SQL语句组成,后面跟 ...
- c#解析XML到DATASET及dataset转为xml文件函数
//将xml对象内容字符串转换为DataSet public static DataSet ConvertXMLToDataSet(string xmlData) { ...
- iOS开发系列--C语言之存储方式和作用域
概述 基本上每种语言都要讨论这个话题,C语言也不例外,因为只有你完全了解每个变量或函数存储方式.作用范围和销毁时间才可能正确的使用这门语言.今天将着重介绍C语言中变量作用范围.存储方式.生命周期.作用 ...
- 搭建Cordova开发环境
Cordova是什么 Apache Cordova是一套设备API,允许移动应用的开发者使用JavaScript来访问本地设备的功能,比如摄像头.加速计.它可以与UI框架(如jQuery Mobile ...
- 《Entity Framework 6 Recipes》中文翻译系列 (29) ------ 第五章 加载实体和导航属性之过滤预先加载的实体集合和修改外键关联
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 5-13 过滤预先加载的实体集合 问题 你想过滤预先加载的实体集合,另外,你想使用 ...
- C# MVC 项目下的路由配置-RouteConfig
1. 设置备份全局路径下的路由 目的,我们在网站中域名后面输入参数,可以跳转到相应的controller,例如:www.innovsys.cn/dd.直后端直接跳转到controller,获取dd参数 ...
- 计算程序总行数的Python代码
最近需要统计一下项目中代码的总行数,写了一个Python小程序,不得不说Python是多么的简洁,如果用Java写至少是现在代码的2倍. import os path="/Users/ron ...
- Vue.js学习笔记（8）拖放
小颖在目前负责的项目中,负责给同事提供所需组件,在这期间,我们家大颖姐姐让我 写个拖拽组件,一开始我是用click实现,先将你要拖拽的dom点一下,然后再点你要放的位置,这个dom再通过小颖写的方法, ...
- 深入学习jQuery鼠标事件
× 目录 [1]类型 [2]写法 [3]合成事件[4]鼠标按键[5]修改键[6]坐标位置 前面的话 鼠标事件是DOM事件中最常用的事件,jQuery对鼠标事件进行了封装和扩展.本文将详细介绍jQuer ...
- 为什么更喜欢Outlook，而不是Gmail
让我写这篇博客主要前段时间dudu写了一篇关于Google Gmail年龄限制问题,导致博客园管理员Gmail账号会被删除,里面的邮件无法迁移出来.围观地址:http://www.cnblogs.co ...