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 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
Apr 07 Javascript
javascript 得到变量类型的函数
May 19 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
Mar 14 Javascript
javascript的console.log()用法小结
May 31 Javascript
javascript禁制后退键(Backspace)实例代码
Nov 15 Javascript
Jquery使用css方法改变样式实例
May 18 Javascript
使用jspdf生成pdf报表
Jul 03 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
Feb 21 Javascript
webpack之引入图片的实现及问题
Oct 08 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
Dec 03 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 Javascript
layer.open回调获取弹出层参数的实现方法
Sep 10 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
ThinkPHP与PHPExcel冲突解决方法
2011/08/08 PHP
php文件上传简单实现方法
2015/01/24 PHP
WordPress开发中用于标题显示的相关函数使用解析
2016/01/07 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
2016/10/11 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
node.js中的fs.link方法使用说明
2014/12/15 Javascript
浅谈EasyUI常用控件的禁用方法
2016/11/09 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
360doc网站不登录就无法复制内容的解决方法
2018/01/27 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
2018/12/24 Javascript
JavaScript常见事件对象与操作实例总结
2019/01/05 Javascript
Vue路由守卫之路由独享守卫
2019/09/25 Javascript
Python打印“菱形”星号代码方法
2018/02/05 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
python连接、操作mongodb数据库的方法实例详解
2019/09/11 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
QML实现钟表效果
2020/06/02 Python
python--shutil移动文件到另一个路径的操作
2020/07/13 Python
快速一键生成Python爬虫请求头
2021/03/04 Python
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
探索HTML5本地存储功能运用技巧
2016/03/02 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
2019/04/30 HTML / CSS
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
大学生就业自荐信
2013/10/26 职场文书
党员公开承诺书范文
2014/03/25 职场文书
竞选文艺委员演讲稿
2014/04/28 职场文书
外贸会计专业自荐信
2014/06/22 职场文书
九九重阳节标语
2014/10/07 职场文书
二年级语文下册复习计划
2015/01/19 职场文书
2015大学生入党个人自传
2015/06/26 职场文书
2016年幼儿园教师政治学习心得体会
2016/01/23 职场文书
个人职业生涯规划之自我评估篇
2019/09/03 职场文书
Python用any()函数检查字符串中的字母以及如何使用all()函数
2022/04/14 Python