jQuery单击另一个div顶部的div [英] jQuery click on div that is on top of another div

问题描述

我有与jQuery问题当选择器是用于是上的顶部的另一个如在这里看到..

I have a problem with jQuery click when the selector is a for a div that is on top of another div as seen here..

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，则会显示黄色警报和红色警报.

If you click on red #parent it gives the proper alert. If you click on yellow #child, it gives the yellow alert plus the red alert.

请参见 jsfiddle

有没有办法解决这个问题?

Is there a way to fix this?

推荐答案

使用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/

这篇关于jQuery单击另一个div顶部的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！