jQuery单击另一个div顶部的div

我有一个问题与jQuery click时，选择器是一个div位于另一个div顶部，如此处所示..

HTML

 
 
 
 
​ 

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/