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

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

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

加一句阻止冒泡即可。