5

ここに示すように、セレクターが別clickのセレクターの上にあるaの場合、jQueryに問題があります。divdiv

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を参照してください

これを修正する方法はありますか？

4

1 に答える 1

7

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/

于 2012-12-09T19:06:09.567 に答える