Preventing parent div click-event handler from triggering when clicking child element

Question

Most probably this issue is well-documented, but I wasn't able to find an answer easily.

I have click-event handlers for a div and a child-element embedded. And the problem is that when I click the embedded element handler (an icon in the example below), both icon and child div handlers are trigger. Whereas the desired behaviour would be to fire only icon click event handler.

What would be best-practice bypass of this issue ? Thanks in advance!

$(function(){
    $('#test_button').on('click', function () {
        alert('Button');
    });
     
    $('#test_div').on('click', function () {
        alert('Div');
    });
});

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id= 'test_div'>
   <i id = "test_button" class="fa fa-times" aria-hidden="true"></i>
</div>

score 0 · Answer 1 · answered May 07 '17 at 16:19

You can use the stopPropagation function to do so:

$(function(){
    $('#test_button').on('click', function (e) {
        e.stopPropagation();
        alert('Button');
     });
     
     $('#test_div').on('click', function () {
        alert('Div');
     });
});

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id= 'test_div'>
   <i id = "test_button" class="fa fa-times" aria-hidden="true"></i>
</div>

Note that you need to pass the event to the function (the e variable in my example).

Preventing parent div click-event handler from triggering when clicking child element

1 Answers1