Stop parent event firing on child element click

Question

I have a click event on li tag and then in that li i have another nested li.

When clicked on parent li everything works fine. But onclick nested or child li the parent li click event is fired.

I have used event.stopPropagation() method but it does not work in my case.

$("li").on("click",function() {
  console.log(this.firstChild.textContent)
})
$('#testUl > li').on('click', function(e) {
  e.stopPropagation();
})



  
    Test A
    
      
        Inner A
        Inner B
        Inner C

user_16902150 · Answer

$('#testUl .innerUl li').on('click', function(e) {
    e.stopPropagation();
});

// or 
$('#testUl li').on('click', function(e) {
    e.stopPropagation();
});

$('#testUl > li').on('click', function(e) {
   alert('test');
});

You are using a wrong selector for stop propagation

When you use #testUl > li you call the first li child element, but you have li elements inside your li on #testUl, so call #testUl li or #testUl .innerUl li

user_9074272 · Answer

You can compare e.target which is element that have click event and e.currentTarget that is element you actually clicked. If they don't match then you return without performing rest of function

$('#testUl > li').on('click', (e) => {
    if (e.target !== e.currentTarget) {
        return;
    }
    console.log('parent');
});

$('.innerUl li').on('click', (e) => {
    if (e.target !== e.currentTarget) {
        return;
    }
    console.log('child');
});



    
        Test A
        
            
                Inner A
                Inner B
                Inner C

NICon_58186 · Answer

Without jQuery you can use event delegation and determine to act using Element.closest()

document.addEventListener(`click`, handle);

function handle(evt) {
  console.clear();
  
  if (!evt.target.closest(`.innerUl`) && evt.target.closest(`#testUl`)) {
      console.log(`You clicked (something within) the first li of ul#testUl`);
  }
}


  
    Test A
    
      
        Inner A
        Inner B
        Inner C

Same idea with jQuery

$("#testUl").on("click", evt => {
    console.clear();
    if (!evt.target.closest(`.innerUl`) && evt.target.closest(`#testUl`)) {
      console.log(`You clicked ${evt.target.outerHTML}`);
    }
  });




  
    Test A
    
      
        Inner A
        Inner B
        Inner C

user_10574423 · Answer

You can try with stopImmediatePropagation()

See here: https://developer.mozilla.org/en-US/docs/Web/API/Event/stopImmediatePropagation

Stop parent event firing on child element click

4 Answers