Event delegates and prevent bubbling prevent parent element events from firing
- 2020-03-30 03:50:14
- OfStack
Just a quick word about event delegation and preventing bubbling
HTML:
<ul class="clearfix" data-type="cityPick">
<li class="active_sort_opts" data-id="0"> all </li>
<li data-id="88"> New York, </li>
<li data-id="119"> Los Angeles, </li>
<li data-id="138"> Las Vegas </li>
<li data-id="84"> Hawaii </li>
<li data-id="120"> San Francisco </li>
<li data-id="105"> Orlando, </li>
<li data-id="118"> In Seattle, </li>
</ul>
Js:
$("ul[data-type='cityPick']").on('click',function(){
alert(" The parent element ul By clicking ");
});
$("ul[data-type='cityPick']").on('click','li',function(){
alert(" Child elements li By clicking ");
});
When the specific li element is clicked, the ul event is also triggered, which we do not want to see.
Solution:
$("ul[data-type='cityPick']").on('click',function(){
alert(" The parent element ul By clicking ");
});
$("ul[data-type='cityPick']").on('click','li',function(e){
e.stopPropagation();//To prevent a bubble
alert(" Child elements li By clicking ");
});
Add a word to stop the bubbling.