jQuery单击另一个div顶部的div

Question

我有一个jQuery的问题,click当选择器是一个div在另一个顶部时,div如此处所示..

HTML

<div id="parent">
 <div id="child">
 </div>
</div>?

CSS

#parent{
 background-color:red;
 width:100px;
 height:100px;   
 position:relative;
}


#parent:hover #child {
 display:block;

}
#child{
 background-color:yellow;  
 width:10px;
 height:10px;  
 border: 1px solid black;
 position:absolute;
 display:none;
 bottom:0;
 right:0;
}

JS

$("#parent").bind("click", function() {
    alert('you clicked on red');
});

$("#child").bind("click", function() {
    alert('you click on yellow');
});?

如果单击红色,#parent则会显示正确的警报.如果单击黄色#child,则会显示黄色警报和红色警报.

看到jsfiddle

有没有办法来解决这个问题？

Answer 1

使用jQuery .stopPropagation()

$("#parent").bind("click", function() {
  alert('you clicked on red');
});

$("#child").bind("click", function(e) {
  e.stopPropagation();
  alert('you click on yellow');  
});?

http://jsfiddle.net/qTdkt/4/