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

As a more general solution, you should check e.target in container's click event handler.

$('.container').click(function(e) {
   // If you want to ignore clicks to anything inside the `.container` div:
   if (!$(e.target).hasClass('container')) return;
   // or, if you only want the `.inside` div to not fire the event,
   if ($(e.target).hasClass('inside')) return;

   // container do something here
});

This way you're not preventing propagation of the event, which would break bound live handlers.

Answer 2

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.

Answer 3

$('.inside').click(function(e) {
    e.stopPropagation();
});

That should work for you. It stops any click in the inside div from bubbling up to the container.

Here's a quick example as well - http://jsfiddle.net/Yf8Ra/1/