How can i not let the click event fire on child element

Question

How can i not let the click event fire on child div.

<div id="div">
     <div id="first"></div>
     <div id="last"></div>
</div>

$('#div').click(function(e){
     //if e.target were object
     if(!e.target.is('#first')){
         //story
     }
});

Answer 1

Try this:

$(".parent_class .child_class").click(function(e) {
    e.stopPropagation();
});

It prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notfied of the event.

Read more about it here.

You could also use(but I haven't tried) e.preventDefault();

If this method is called, the default action of the event will not be triggered.