关于jquery中用on绑定事件后的事件冒泡问题
来源:互联网 发布:澳大利亚留学 知乎 编辑:程序博客网 时间:2024/06/15 07:24
用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>
0 0
- 关于jquery中用on绑定事件后的事件冒泡问题
- Jquery,1.7+后的版本使用.on()绑定事件,动态绑定事件,绑定未来事件
- iOS上的jQuery.on()冒泡事件绑定 给body添加点击事件
- jQuery的on绑定事件在mobile safari(iphone / ipad / ipod)上无法冒泡事件?
- 关于原生事件绑定和jquery的On
- jQuery事件绑定.on()
- jQuery事件绑定.on()
- jquery on()事件绑定
- 关于jquery中on绑定click事件在苹果手机失效的问题
- 关于jquery中on绑定click事件在苹果手机失效的问题
- jquery使用on()方法绑定元素阻止事件冒泡问题
- jquery中on动态绑定阻止冒泡事件异常
- jquery通过on绑定事件,停止冒泡不起作用
- jquery:DOM更改后重新绑定事件的问题
- jquery:DOM更改后重新绑定事件的问题
- jQuery新的事件绑定机制on()
- jQuery新的事件绑定机制on()
- jQuery新的事件绑定机制on()
- wBox FancyBox window.open Demo
- HDOJ 5142 NPY and FFT
- Java中 堆 栈,常量池等概念解析(转载)
- 输入Email邮箱地址自动提示后缀名
- Modular Equations
- 关于jquery中用on绑定事件后的事件冒泡问题
- 如何认清PVC塑胶地板工程质量标准验收?
- Ubuntu安装总结
- 设备驱动工程师之路——input子系统
- [leetcode]Implement strStr()
- squid工作原理及3.1.4版本源代码安装配置实例指南
- 【COCOS2DX-LUA 脚本开发之七】解决( error in function ‘addChild’. argument #2 is ‘xx’; ‘CCNode’ expected. )异常报错
- OJ--转换日期格式
- ceph存储 ceph集群配置参数一