前端开发

 首页 > 前端开发 > jquery教程 > 事件委托与阻止冒泡阻止其父元素事件触发_jqu

事件委托与阻止冒泡阻止其父元素事件触发_jqu

分享到:
【字体:
导读:
          当点击具体的li元素时,发现ul的事件也被触发了,这是我们不想看到的,解决方法就是加一句阻止冒泡即可...

简单说下事件委托与阻止冒泡

html:

  • 全部
  • 纽约
  • 洛杉矶
  • 拉斯维加斯
  • 夏威夷
  • 旧金山
  • 奥兰多
  • 西雅图

js:

$("ul[data-type='cityPick']").on('click',function(){ 
alert("父元素ul被点击"); 
}); 
$("ul[data-type='cityPick']").on('click','li',function(){ 
alert("子元素li被点击"); 
});

当点击具体的li元素时,发现ul的事件也被触发了,这是我们不想看到的。

解决:

$("ul[data-type='cityPick']").on('click',function(){ 
alert("父元素ul被点击"); 
}); 
$("ul[data-type='cityPick']").on('click','li',function(e){ 
e.stopPropagation();//阻止冒泡 
alert("子元素li被点击"); 
});

加一句阻止冒泡即可。

分享到:
解决jquery版本冲突的有效方法_jquery_自...
用过jQuery的朋友都知道jQuery不同版本会引发冲突,本文就此问题提出有效的解决方案如下: 案例:解决jQuery1.3.2和1.4.2的冲突。(本例已测试通过!) 第一步:在1.4.2的源代码的最后加上一句 : var $j4 = jQuery.noConflict(true); 之所以在源码这里加,而不是像大多数文章提的在要用到的时候加,这是因为很...
jquery实现个人中心导航菜单效果和美观都...
之前为大家介绍了一款jquery和css3实现的很酷的菜单导航。这是一款由jquery开发的导航菜单。适合放在门户网站的个人用户中心后台。效果和美观都非常不错。我们先一起看看效果图: 源码下载 一起看下实现的代码: html代码: Profile Messages 12 Settings Account Profile ...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……