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 相关文章推荐
IE本地存储userdata的一个bug说明
Jul 01 Javascript
jquery实现marquee效果(文字或者图片的水平垂直滚动)
Jan 07 Javascript
javascript中typeof的使用示例
Dec 19 Javascript
JS实现鼠标单击与双击事件共存
Mar 08 Javascript
jQuery遮罩层效果实例分析
Jan 14 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 Javascript
mui框架移动开发初体验详解
Oct 11 Javascript
纯JavaScript实现实时反馈系统时间
Oct 26 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
Feb 10 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
使用mixins实现elementUI表单全局验证的解决方法
Apr 02 Javascript
详解 微信小程序开发框架(MINA)
May 17 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实现获取及设置用户访问页面语言类
2014/09/24 PHP
dedecms集成财付通支付接口
2014/12/28 PHP
关于JavaScript中var声明变量作用域的推断
2010/12/16 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
js数组的操作指南
2014/12/28 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
原生js配合cookie制作保存路径的拖拽
2015/12/29 Javascript
js判断手机系统是android还是ios
2017/03/07 Javascript
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
2019/11/18 jQuery
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
Pycharm 操作Django Model的简单运用方法
2018/05/23 Python
python中使用psutil查看内存占用的情况
2018/06/11 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
django 实现简单的插入视频
2020/04/07 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
表达自我的市场:Society6
2018/08/01 全球购物
Currentbody美国/加拿大:美容仪专家
2020/03/09 全球购物
有多年工作经验的自我评价
2014/03/02 职场文书
院领导写的就业推荐信
2014/03/09 职场文书
村抢险救灾方案
2014/05/09 职场文书
汽车维修专业自荐书
2014/05/26 职场文书
晋江市人民政府党组群众路线教育实践活动整改方案
2014/10/25 职场文书
英语教师个人总结
2015/02/09 职场文书
关于环保的广播稿
2015/12/17 职场文书
护理工作心得体会
2016/01/22 职场文书
2019年英语版感谢信(8篇)
2019/09/29 职场文书
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA