子元素单击事件触发父元素单击事件

You need to use event.stopPropagation()

Live Demo

$('#childDiv').click(function(event){
event.stopPropagation();
alert(event.target.id);
});​

event.stopPropagation()

Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

Without jQuery : DEMO

 <div id="parentDiv" onclick="alert('parentDiv');">
<div id="childDiv" onclick="alert('childDiv');event.cancelBubble=true;">
AAA
</div>
</div>

The stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent handlers from being notified of the event.

You can use the method event.isPropagationStopped() to know whether this method was ever called (on that event object).

Syntax:

Here is the simple syntax to use this method:

event.stopPropagation()

Example:

$("div").click(function(event) {
alert("This is : " + $(this).prop('id'));


// Comment the following to see the difference
event.stopPropagation();
});​

Click event Bubbles, now what is meant by bubbling, a good point to starts is here. you can use event.stopPropagation(), if you don't want that event should propagate further.

Also a good link to refer on MDN

I faced the same problem and solve it by this method. html :

<div id="parentDiv">
<div id="childDiv">
AAA
</div>
BBBB
</div>

JS:

$(document).ready(function(){
$("#parentDiv").click(function(e){
if(e.target.id=="childDiv"){
childEvent();
} else {
parentEvent();
}
});
});


function childEvent(){
alert("child event");
}


function parentEvent(){
alert("paren event");
}