脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery on绑定事件 事件冒泡

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

 更新时间：2016年05月25日 14:23:17   作者：周XXXX  
这篇文章主要介绍了jQuery中on绑定事件后引发的事件冒泡问题及解决办法，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧

用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绑定事件后引发的事件冒泡问题及解决办法，希望能够帮助到大家！

您可能感兴趣的文章:

相关文章

  • jQuery实现控制文字内容溢出用省略号(…)表示的方法

    jQuery实现控制文字内容溢出用省略号(…)表示的方法

    这篇文章主要介绍了jQuery实现控制文字内容溢出用省略号(…)表示的方法,涉及jQuery针对字符串及样式操作相关技巧,需要的朋友可以参考下
    2016-02-02
  • jQuery预加载图片常用方法

    jQuery预加载图片常用方法

    这篇文章主要介绍了jQuery预加载图片常用方法,以两个简单实例分析了jQuery预加载图片的实现技巧,需要的朋友可以参考下
    2015-06-06
  • jQuery UI 应用不同Theme的办法

    jQuery UI 应用不同Theme的办法

    jQuery UI是一套非常好用的jQuery Tools库，目前已经发布的最新版本是1.8.4。在我自己的使用过程中，总有一些不爽。因为我下载的那个包里默认的主题样式是下图这样的，使用起来很难和具体的网页风格去配合。
    2010-09-09
  • jquery实现表格本地排序的方法

    jquery实现表格本地排序的方法

    这篇文章主要介绍了jquery实现表格本地排序的方法,实例分析了jQuery操作数组实现本地表格排序的技巧,需要的朋友可以参考下
    2015-03-03
  • jquery实现向下滑出的二级导航下滑菜单效果

    jquery实现向下滑出的二级导航下滑菜单效果

    这篇文章主要介绍了jquery实现向下滑出的二级导航下滑菜单效果,涉及jquery实现页面结点样式动态变换效果的实现技巧,非常具有实用价值,需要的朋友可以参考下
    2015-08-08
  • jQuery实现点击图片翻页展示效果的方法

    jQuery实现点击图片翻页展示效果的方法

    这篇文章主要介绍了jQuery实现点击图片翻页展示效果的方法,涉及jQuery操作图片的操作技巧,非常具有实用价值,需要的朋友可以参考下
    2015-02-02
  • jquery实现全选、不选、反选的两种方法

    jquery实现全选、不选、反选的两种方法

    这篇文章主要为大家详细介绍了jquery实现全选、不选、反选的两种方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-09-09
  • jQuery图片轮播实现并封装(一)

    jQuery图片轮播实现并封装(一)

    这篇文章主要为大家详细介绍了jQuery图片轮播实现并封装,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 基于JQuery的asp.net树实现代码

    基于JQuery的asp.net树实现代码

    在网上找了tree,想直接拿来用,谁知道竟然没有找到基于asp.net的tree,索性自己便把jquery的tree拿来研究了下,然后结合者asp.net,做了一个递归树.
    2010-11-11
  • Bootstrop实现多级下拉菜单功能

    Bootstrop实现多级下拉菜单功能

    Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。本文重点给大家介绍bootstrap实现多级下拉菜单功能的实例代码，感兴趣的朋友一起学习吧
    2016-11-11

最新评论