How do I prevent a parent's onclick event from firing when a child anchor is clicked?

Question

I\'m currently using jQuery to make a div clickable and in this div I also have anchors. The problem I\'m running into is that when I click on an anchor both click events ar

Answer 1

Inline Alternative:

<div>
    <!-- Other content. -->
    <a onclick='event.stopPropagation();' href="http://foo.com">I don't want #clickable to handle this click event.</a>
</div>

Answer 2

Using return false; or e.stopPropogation(); will not allow further code to execute. It will stop flow at this point itself.

Answer 3

You need to stop the event from reaching (bubbling to) the parent (the div). See the part about bubbling here, and jQuery-specific API info here.

Answer 4

If it is in inline context, in HTML try this:

onclick="functionCall();event.stopPropagation();

Answer 5

Writing if anyone needs (worked for me):

event.stopImmediatePropagation()

From this solution.

Answer 6

You can check whether the target is not your div-element and then issue another click event on the parent after which you will "return" from the handle.

$('clickable').click(function (event) {
    let div = $(event.target);
    if (! div.is('div')) {
       div.parent().click();
       return;
    }
    // Then Implement your logic here
}