欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-09 15:15:11
...
简单说下事件委托与阻止冒泡

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被点击"); 
});

加一句阻止冒泡即可。