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/