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 相关文章推荐
向fckeditor编辑器插入指定代码的方法
May 25 Javascript
jquery 图片上传按比例预览插件集合
May 28 Javascript
JavaScript 语言基础知识点总结(思维导图)
Nov 10 Javascript
jQuery提交多个表单的小技巧
Jul 27 Javascript
重写document.write实现无阻塞加载js广告(补充)
Dec 12 Javascript
JavaScript中number转换成string介绍
Dec 31 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
Nov 24 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 Javascript
angular2 组件之间通过service互相传递的实例
Sep 30 Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
JavaScript数组常用的增删改查与其他属性详解
Oct 13 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/10/09 PHP
PHP常用的缓存技术汇总
2014/05/05 PHP
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
使用GruntJS构建Web程序之构建篇
2014/06/04 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
jQuery动态创建html元素的常用方法汇总
2014/09/05 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
vue中appear的用法
2017/08/17 Javascript
layer.close()关闭进度条和Iframe窗的方法
2018/08/17 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
2020/02/03 Javascript
Python中分数的相关使用教程
2015/03/30 Python
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
Python实现matplotlib显示中文的方法详解
2018/02/06 Python
python 读入多行数据的实例
2018/04/19 Python
Python for循环生成列表的实例
2018/06/15 Python
Django如何将URL映射到视图
2019/07/29 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
Python OpenCV中的numpy与图像类型转换操作
2020/12/11 Python
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
帕克纽约:PARKER NY
2018/12/09 全球购物
资生堂英国官网:Shiseido英国
2020/12/30 全球购物
C/C++ 笔试、面试题目大汇总
2015/11/21 面试题
生产部经理岗位职责
2013/12/16 职场文书
运动会广播稿400字
2014/01/25 职场文书
聊城大学毕业生自荐书
2014/02/01 职场文书
2014年消防工作总结
2014/11/21 职场文书
人口与计划生育责任书
2015/05/09 职场文书
2015中秋祝酒词
2015/08/12 职场文书
十大必看国产动漫排名,魁拔上线,第二曾在日本播出
2022/03/18 国漫
PostgreSQL聚合函数介绍以及分组和排序
2022/04/12 PostgreSQL
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python