jQuery js 中return false,e.preventDefault(),e.stopPropagation()的区别(事件冒泡)
有时候遇到冒泡事件很烦人,真的.....
1.e.stopPropagation()阻止事件冒泡
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
</head>
<body>
<table>
<tr>
<td><span>冒泡事件测试</span></td>
</tr>
</table>
</body>
我们先看这段代码：
<script type="text/javascript">
$(function () {
$("table").click(function () { alert("table alert"); });
$("td").click(function () { alert("td alert"); });
$("span").click(function (){
alert("span alert");
});
});
</script>
我们会看到这样的情况：span alert -> td alert -> table alert。这就叫事件冒泡。就是从下到上，从里到外，事件依次触发。
有的时候我们不希望事件冒泡咋办？
<script type="text/javascript">
$(function () {
$("table").click(function () { alert("table alert"); });
$("td").click(function () { alert("td alert"); });
$("span").click(function (e){
alert("span alert");
e.stopPropagation();
});
});
</script>
如果想获得事件相关信息，就要给匿名方法加一个e对象，e就是事件对象。
2.e.preventDefault()阻止事件默认行为。
$("a").click(function (e) {
alert("默认行为被禁止喽");
e.preventDefault();
});
<a href="http://www.baidu.com">测试</a>
3.return false
return false 等效于同时调用e.preventDefault()和e.stopPropagation().
return false除了阻止默认行为之外，还会阻止事件冒泡。如果手上有一份jquery源代码的话，可查看其中有如下代码：
if (ret===false){
event.preventDefault();
event.stopPropagation();
}
jQuery js 中return false,e.preventDefault(),e.stopPropagation()的区别(事件冒泡)的更多相关文章
- jQuery中return false,e.preventDefault(),e.stopPropagation()的区别
e.stopPropagation()阻止事件冒泡 <head> <title></title> <script src="Scripts/jQue ...
- jQuery中的 return false, e.preventDefault(), e.stopPropagation()的区别
e.stopPropagation()阻止事件冒泡 <html><head> <title></title> <script sr ...
- 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; 在大多数情况下,为事件 ...
- js中return false，return，return true的使用方法及区别
起首return作为返回keyword,他有下面两种返回体式格式 1.返回把握与函数成果 语法为:return 表达式; 语句停止函数履行,返回调用函数,而且把表达式的值作为函数的成果 2.返回把握无 ...
- js中return false,return,return true的用法及区别
首先return作为返回关键字,他有以下两种返回方式 1.返回控制与函数结果 语法为:return 表达式; 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果 2.返回控制无函数结果 语 ...
- js中return false，return，return true的用法及差别
起首return作为返回关键字,他有以下两种返回体式格式 1.返回把握与函数成果 语法为:return 表达式; 语句停止函数履行,返回调用函数,并且把表达式的值作为函数的成果 2.返回把握无函数成果 ...
- 关于js中return false、event.preventDefault()和event.stopPropagation()
在平时项目中,如果遇到需要阻止浏览器默认行为,大家经常会用return false;和event.preventDefault()来阻止,但对它俩的区别还是有些一知半解,于是看了文档,查了些资料,在此 ...
- js中return、return true、return false的区别
一.返回控制与函数结果, 语法为:return 表达式; 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果 二.返回控制, 无函数结果,语法为:return; 在大多数情况下,为事件 ...
随机推荐
- WHU1124 Football Match
http://acm.whu.edu.cn/learn/problem/detail?problem_id=1124 题目大意:有N支球队,你们是第N支.每个队伍已经有一些分数了,接下来还有M场比赛. ...
- 从零开始的程序逆向之路基础篇 第二章——用OllyDbg(OD)分析一个简单的软件
作者:Crazyman_Army 原文来自:https://bbs.ichunqiu.com/thread-43469-1-1.html 0x00知识回顾 (由于笔者省事,没开XP虚拟机,而且没关闭A ...
- antd在webpack里面的配置
概述 antd是蚂蚁金服打造的一个react组件,真的非常棒,我看了下官方文档,感觉比bootstrap要好.唯一的缺点可能就是打包的时候要打包它的一些样式表,所以资源体积会很大,并且css可能会和自 ...
- Caffe 使用记录（五）：math_functions 分析
本文转载自 Caffe源码(一):math_functions 分析 math_function 定义了caffe 中用到的一些矩阵操作和数值计算的一些函数,这里以float类型为例做简单的分析 1. ...
- python之排序算法
排序是每个语言都需要学会的,不管是c++.java还是python,套路都是类似的 python中也有自带的排序函数sort,直接使用也可 闲来无事写了几个排序算法,各不相同 1.每次遇到最小的数都交 ...
- 单点登录SSO图示和讲解（有代码范例）转帖
完整的代码范例已完成,因和本文时序图严格对照,注释整理还需要一些工作,完成后将在下一篇放出.大家下载配置后,本地跑起来会是图一动画所示的运行效果,敬请期待. 敢说最准确,因为: 我严格对照所画时序图的 ...
- Android面试题（3）
1. 请描述下Activity的生命周期. activity的生命周期方法有: onCreate().onStart().onReStart().onResume().onPause().onSto ...
- springboot属性注入转化为对象
第一种方式:用spel表达式解析 @Value("#{ T(com.alibaba.fastjson.JSON).parseObject('${train.purchase}')}" ...
- PostgreSQL Json字段作为查询条件案例
业务扩展字段在数据库中经常会使用json格式的数据来存储,这就涉及到一个头疼的问题,假设要使用扩展字段里的某个值作为查询条件怎么办,原来PostgreSQL本身就支持这种查询方式. 例子:假设业务扩展 ...
- PHP-CPP开发扩展（三）
PHP-CPP是一个用于开发PHP扩展的C++库.本节讲解PHP函数形参相关的实现. 指定函数参数类型 有时候,我们需要指定函数的形参是数组或者指定的,那么在PHP-CPP里是否可以指定函数的参数类型 ...