防止点击事件触发父操作

Question

I have lis containing anchor tags for deleting that particular li. So, I have onclick event for both anchor tag and li. Clicking on li opens up a modal window and click on anchor tag is supposed to hide that li.

How can I trigger click event on anchor tag without it triggering li click event. Here is what I have tired so far:

JS:

$('body').on('click', 'a', function(e) {
    if(confirm('Are you sure you want to delete it?') == true){
        $(this).parent().hide();
    }
    //e.preventDefault();     
    e.stopPropagation();   
});

HTML:

<li onclick="openModal(0)">
  <a class="closer">X</a>
  <h3>Lolita</h3>
  <p>Check it</p>
</li>

Answer 1

Here's a fiddle with your answer: https://jsfiddle.net/jimedelstein/bsg4jq3m/

You need to detect the target of the click, and if it's the link ignore it, otherwise trigger the li click.

<li>
  <a class="closer">X</a>
  <h3>Lolita</h3>
  <p>Check it</p>
</li>


$('body').on('click', 'a', function(e) {
    if(confirm('Are you sure you want to delete it?') == true){
        $(this).parent().hide();
    } 
    e.stopPropagation();   
});

function openModal(e){
    if (e.target != $("a.closer")[0]){
     alert("not the link!");
  }
};

$("li").on("click", openModal);