How to cancel click event of container div trigger when click elements which inside container in JQuery?

Question

E.g

  
I am not fire when click me


$(\'.container\').click(function(){
          


        

Answer 1

Add a click event handler to inside as follows:

$('.inside').click(function(event) {
    // do anything you might want with the click for inside
    return false; // prevents click event from bubbling up the DOM hierarchy
});

Alternatively, event.stopPropagation() also prevents bubbling like so:

$('.inside').click(function(event) {
    // do anything you might want with the click for inside
    event.stopPropagation(); // prevents click event from bubbling up the DOM hierarchy
});

This article explains event bubbling.