이벤트 위임 및 버블링 방지로 상위 요소 이벤트가 Triggering_jquery되지 않도록 방지

이벤트 위임 및 버블링 방지에 대해 간단히 이야기

html:

<ul class="clearfix" data-type="cityPick"> 
<li class="active_sort_opts" data-id="0">全部</li> 
<li data-id="88">纽约</li> 
<li data-id="119">洛杉矶</li> 
<li data-id="138">拉斯维加斯</li> 
<li data-id="84">夏威夷</li> 
<li data-id="120">旧金山</li> 
<li data-id="105">奥兰多</li> 
<li data-id="118">西雅图</li> 
</ul>

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

말만 추가하면 버블링이 중단됩니다.