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 相关文章推荐
关于URL中的特殊符号使用介绍
Nov 03 Javascript
javascript中input中readonly和disabled区别介绍
Oct 23 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
Jan 22 Javascript
jQuery处理XML文件的几种方法
Jun 14 Javascript
JavaScript实现图片瀑布流和底部刷新
Jan 02 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
Dec 29 Javascript
JavaScript 下载svg图片为png格式
Jun 21 Javascript
在vue中给列表中的奇数行添加class的实现方法
Sep 05 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 Javascript
KnockoutJS数组比较算法实例详解
Nov 25 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
Jul 22 Javascript
JavaScript实现一键复制内容剪贴板
Jul 23 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
Destoon模板制作简明教程
2014/06/20 PHP
destoon数据库表说明汇总
2014/07/15 PHP
php中Y2K38的漏洞解决方法实例分析
2014/09/22 PHP
php+mysql数据库查询实例
2015/01/21 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
微信开发之获取JSAPI TICKET
2017/07/07 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
2010/07/24 Javascript
innerText和textContent对比及使用介绍
2013/02/27 Javascript
地址栏传递中文参数乱码在js里用escape转码
2013/08/28 Javascript
仿百度的关键词匹配搜索示例
2013/09/25 Javascript
常规表格多表头查询示例
2014/02/21 Javascript
Node.js事件驱动
2015/06/18 Javascript
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
JS动态日期时间的获取方法
2015/09/28 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
2015/12/22 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
2016/11/22 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
JS验证字符串功能
2017/02/22 Javascript
jQuery 控制文本框自动缩小字体填充
2017/06/16 jQuery
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
jQuery 动态粒子效果示例代码
2020/07/07 jQuery
解决VantUI popup 弹窗不弹出或无蒙层的问题
2020/11/03 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
python3 kmp 字符串匹配的方法
2018/07/07 Python
详解PyTorch中Tensor的高阶操作
2019/08/18 Python
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
详解px单位html5响应式方案
2018/03/08 HTML / CSS
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
村官学习十八大感想
2014/01/15 职场文书
教师辞职书范文
2015/02/26 职场文书
java代码实现空间切割
2022/01/18 Java/Android
Java实现HTML转为Word的示例代码
2022/06/28 Java/Android