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

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

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

加一句阻止冒泡即可。