jQuery中on绑定事件后引发的事件冒泡问题如何解决


Posted in Javascript onMay 25, 2016

用on绑定时,我把子元素的 绑定到 document,而把父元素绑定到上级元素,导致 return false 阻止冒泡无效。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>事件冒泡</title> 
<script src="jquery-1.7.1.js" type="text/javascript"></script> 
<script language="javascript" type="text/javascript"> 
$(function () { 
$(document).on("click","#p1",function(e){ 
console.log(e.target.tagName); 
console.log("p1被点击了"); 
//e.stopPropagation(); //终止冒泡的方法 
return false; 
}) 
$("#aa").on("click","#td1",function(e){ 
console.log(e.target.tagName); 
console.log("td1被点击了"); 
}) 
$("#aa").on("click","#tr1",function(e){ 
console.log(e.target.tagName); 
console.log("tr1被点击了"); 
}) 
$("#aa").on("click","#table1",function(e){ 
console.log(e.target.tagName); 
console.log("table1被点击了"); 
}) 
}); 
</script> 
</head> 
<body id="aa"> 
<table onclick="alert('这是table')"> 
<tr onclick="alert('这是tr')"> 
<td onclick="alert('这是td')"> 
<p onclick="alert('这是p')">段落</p> 
</td> 
</tr> 
</table> 
<table id="table1"> 
<tr id="tr1"> 
<td id="td1"> 
<p id="p1">你好</p> 
</td> 
</tr> 
</table> 
</body> 
</html>

on方法 将click等事件绑定在document对象上,页面上任何元素发生的click事件都冒泡到document对象上得到处理。

增加了绑定效率。当事件冒泡到document对象时,检测事件的target,如果与传入的选择符(这里是button)匹配,就触发事件,否则不触发。

修改为统一绑定对象后即解决,初步认为是因为 on方法的绑定机制问题。

所以return false 无效。子元素和父元素修改为相同 绑定元素后,问题解决

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>事件冒泡</title> 
<script src="jquery-1.7.1.js" type="text/javascript"></script> 
<script language="javascript" type="text/javascript"> 
$(function () { 
$("#aa").on("click","#p1",function(e){ 
console.log(e.target.tagName); 
console.log("p1被点击了"); 
//e.stopPropagation(); //终止冒泡的方法 
return false; 
}) 
$("#aa").on("click","#td1",function(e){ 
console.log(e.target.tagName); 
console.log("td1被点击了"); 
}) 
$("#aa").on("click","#tr1",function(e){ 
console.log(e.target.tagName); 
console.log("tr1被点击了"); 
}) 
$("#aa").on("click","#table1",function(e){ 
console.log(e.target.tagName); 
console.log("table1被点击了"); 
}) 
}); 
</script> 
</head> 
<body id="aa"> 
<table onclick="alert('这是table')"> 
<tr onclick="alert('这是tr')"> 
<td onclick="alert('这是td')"> 
<p onclick="alert('这是p')">段落</p> 
</td> 
</tr> 
</table> 
<table id="table1"> 
<tr id="tr1"> 
<td id="td1"> 
<p id="p1">你好</p> 
</td> 
</tr> 
</table> 
</body> 
</html>

以上所述是小编给大家介绍的jQuery中on绑定事件后引发的事件冒泡问题及解决办法,希望能够帮助到大家!

Javascript 相关文章推荐
网页javascript精华代码集
Jan 24 Javascript
浅谈javascript中的作用域
Apr 07 Javascript
Bootstrap框架下下拉框select搜索功能
Mar 26 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
Jan 17 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
Jan 24 Javascript
微信小程序实现tab切换效果
Nov 21 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
React diff算法的实现示例
Apr 20 Javascript
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 Javascript
vue-router 源码之实现一个简单的 vue-router
Jul 02 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
详解阿里Node.js技术文档之process模块学习指南
Jan 04 Javascript
jQuery each函数源码分析
May 25 #Javascript
jQuery中的each()详细介绍(推荐)
May 25 #Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
May 25 #Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
May 25 #Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
May 25 #Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 #Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
May 25 #Javascript
You might like
PHP图片上传类带图片显示
2006/11/25 PHP
URL Rewrite的设置方法
2007/01/02 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
为你总结一些php信息函数
2015/10/21 PHP
分享PHP源码批量抓取远程网页图片并保存到本地的实现方法
2015/12/01 PHP
Laravel使用PHPQRCODE实现生成带有LOGO的二维码图片功能示例
2017/07/07 PHP
Nginx下ThinkPHP5的配置方法详解
2017/08/01 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
向fckeditor编辑器插入指定代码的方法
2007/05/25 Javascript
JavaScript中的Location地址对象
2008/01/16 Javascript
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
vue实现列表的添加点击
2016/12/29 Javascript
JavaScript验证知识整理
2017/03/24 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
使用svg实现动态时钟效果
2018/07/17 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
vue-week-picker实现支持按周切换的日历
2019/06/26 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
JavaScript仿京东轮播图效果
2021/02/25 Javascript
django实现分页的方法
2015/05/26 Python
Windows下python3.6.4安装教程
2018/07/31 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
Python使用docx模块实现刷题功能代码
2020/02/13 Python
Python使用Numpy模块读取文件并绘制图片
2020/05/13 Python
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
客服实习的个人自我鉴定
2013/10/20 职场文书
大学信息公开实施方案
2014/03/09 职场文书
开展读书活动总结
2014/06/30 职场文书
宣传活动总结范文
2014/07/01 职场文书
乡镇党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
敲诈同学钱财检讨书范文
2014/11/18 职场文书
2015公务员试用期工作总结
2014/12/12 职场文书
民主评议党员个人自我评价
2015/03/03 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书
HTML5页面音频自动播放的实现方式
2021/06/21 HTML / CSS