jQuery中事件对象e的事件冒泡用法示例介绍


Posted in Javascript onApril 25, 2014

之前查手册的时候没有看到有事件对象这一概念,当时我想实现的是点击一个文本框出现一个下拉多选框,在文本框失去焦点是触发blur事件,从而使下拉框隐藏起来。但是当我要选择多选框是也会使它隐藏,就不能进行选择了,这让我很郁闷。查了一天的资料,终于在脱离了焦点这一块。在网上发现有一个事件冒泡的东西,发现通过点击可以实现我的这一功能。

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>

当我给整个document实现click事件是,可以给文本框和下拉选框阻止事件冒泡,使得再点击她们的同时不会使document触发事件。

如果想获得事件相关信息,就要给知识方法加一个e对象,e就是事件对象。

e.preventDefault()阻止事件默认行为。

$("a").click(function (e) { 
alert("默认行为被禁止喽"); 
e.preventDefault(); 
}); 
<a href="http://www.baidu.com">测试</a>

return false等效于同时调用e.preventDefault()和e.stopPropagation()

return false除了阻止默认行为之外,还会阻止事件冒泡。如果手上有一份jquery源代码的话,可查看其中有如下代码:

if (ret===false){ 
event.preventDefault(); 

event.stopPropagation(); 
}
Javascript 相关文章推荐
在JavaScript中实现命名空间
Nov 23 Javascript
js一组验证函数
Dec 20 Javascript
JavaScript对象、属性、事件手册集合方便查询
Jul 04 Javascript
JavaScript常用全局属性与方法记录积累
Jul 03 Javascript
禁止空格提交表单的js代码
Nov 17 Javascript
JS下载文件|无刷新下载文件示例代码
Apr 17 Javascript
jQuery实现Email邮箱地址自动补全功能代码
Nov 03 Javascript
Node.js如何自动审核团队的代码
Jul 20 Javascript
AngularJS入门教程引导程序
Aug 18 Javascript
JavaScript实现定时页面跳转功能示例
Feb 14 Javascript
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
js实现烟花特效
Mar 02 Javascript
jquery实现select选中行、列合计示例
Apr 25 #Javascript
js点击事件链接的问题解决
Apr 25 #Javascript
对js关键字命名的疑问介绍
Apr 25 #Javascript
html5+javascript制作简易画板附图
Apr 25 #Javascript
js实现字符串的16进制编码不加密
Apr 25 #Javascript
利用js制作html table分页示例(js实现分页)
Apr 25 #Javascript
jquery操作select大全
Apr 25 #Javascript
You might like
php 文章调用类代码
2011/08/11 PHP
基于php常用函数总结(数组,字符串,时间,文件操作)
2013/06/27 PHP
Smarty中调用FCKeditor的方法
2014/10/27 PHP
php实现获取文件mime类型的方法
2015/02/11 PHP
PHP读取PPT文件的方法
2015/12/10 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
javascript实现动态改变层大小的方法
2015/05/14 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
2015/09/28 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
动态的9*9乘法表效果的实现代码
2016/05/16 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
2016/09/19 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
vue中接口域名配置为全局变量的实现方法
2018/09/20 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
Python入门学习之字符串与比较运算符
2015/10/12 Python
Python3.2模拟实现webqq登录
2016/02/15 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
Python 实现引用其他.py文件中的类和类的方法
2018/04/29 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
pycharm修改文件的默认打开方式的步骤
2019/07/29 Python
python中for循环变量作用域及用法详解
2019/11/05 Python
python自动化实现登录获取图片验证码功能
2019/11/20 Python
使用Pytorch来拟合函数方式
2020/01/14 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
python如何导出微信公众号文章方法详解
2020/08/31 Python
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
EJB3推出JPA的原因
2013/10/16 面试题
医学生个人求职信范文
2013/09/24 职场文书
2014年网络管理员工作总结
2014/12/01 职场文书
新员工辞职信范文
2015/05/12 职场文书
民事起诉书范本
2015/05/19 职场文书
python中pandas对多列进行分组统计的实现
2021/06/18 Python
javascript拖曳互换div的位置实现示例
2021/06/28 Javascript