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 相关文章推荐
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
Jul 15 Javascript
多个js与css文件的合并方法详细说明
Dec 26 Javascript
Jquery注册事件实现方法
May 18 Javascript
javascript日期操作详解(脚本之家整理)
Sep 05 Javascript
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
基于ES6 Array.of的用法(实例讲解)
Sep 05 Javascript
Vue+webpack项目基础配置教程
Feb 12 Javascript
vue中echarts3.0自适应的方法
Feb 26 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 Javascript
VUE项目初建和常见问题总结
Sep 12 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
Sep 09 Javascript
JS sort排序详细使用方法示例解析
Sep 27 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使用pdo连接报错Connection failed SQLSTATE的解决方法
2014/12/15 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
PHP后台实现微信小程序登录
2018/08/03 PHP
laravel实现上传图片,并且制作缩略图,按照日期存放的代码
2019/10/16 PHP
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
jQuery实现单行文字间歇向上滚动源代码
2013/06/02 Javascript
js replace 与replaceall实例用法详解
2013/08/03 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
javascript 实现字符串反转的三种方法
2013/11/23 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
从数组中随机取x条不重复数据的JS代码
2013/12/24 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
2016/07/12 Javascript
微信运维交互机器人的示例代码
2018/11/12 Javascript
详解Vue组件之作用域插槽
2018/11/22 Javascript
对于防止按钮重复点击的尝试详解
2019/04/22 Javascript
JavaScript如何实现元素全排列实例代码
2019/05/14 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
jQuery 判断元素是否存在然后按需加载内容的实现代码
2020/01/16 jQuery
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
python模块restful使用方法实例
2013/12/10 Python
Hadoop中的Python框架的使用指南
2015/04/22 Python
Python 正则表达式入门(中级篇)
2016/12/07 Python
浅谈flask截获所有访问及before/after_request修饰器
2018/01/18 Python
Python  unittest单元测试框架的使用
2018/09/08 Python
python面试题之列表声明实例分析
2019/07/08 Python
Python PyQt5整理介绍
2020/04/01 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
selenium+headless chrome爬虫的实现示例
2021/01/08 Python
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
CSS3的 fit-content实现水平居中
2017/09/07 HTML / CSS
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
工商管理专业职业生涯规划
2014/01/01 职场文书
刘胡兰观后感
2015/06/16 职场文书
董事长秘书工作总结
2015/08/14 职场文书
《圆的面积》教学反思
2016/02/19 职场文书