当选择器是位于另一个 div
之上的 div
的选择器时,我遇到了 jQuery click
的问题,如此处所示。 .
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
有办法解决这个问题吗?
最佳答案
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');
});
关于jQuery 单击位于另一个 div 之上的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13790673/