If A Nested Element Fires An Event, Dont Let The Container Handle It

I have a div that contains another div. If the user clicks the inner div I only want the eventhandler attached to this element get executed. Right now first the eventhandler of the

Solution 1:

You could stop the propagation:

$("#innerElement").click(function(event){
    alert("This comes from inner element");
    event.stopPropagation();
});

Solution 2:

Add event.stopPropagation();

$("#innerElement").click(function(event){
    alert("This comes from inner element");
    event.stopPropagation();
});

Solution 3:

Returning false from the handler will prevent bubbling (among other things):

$("#innerElement").click(function(event){
     alert("This comes from container");
     returnfalse;
});

Solution 4:

Add event.stopPropagation() to your innerElement event handler. See the jQuery docs for more info.

$("#innerElement").click(function(event){
    alert("This comes from inner element");
    event.stopPropagation();
});

Solution 5:

As above:

http://jsbin.com/avikol/2/