jQuery的点击是另一个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

Use jQuery's .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/