jquery检查是否单击了div

Question

我有以下HTML代码:

<div id="gridStage">
   <div id="point1" class="point rounded-corners">
   </div>
</div>

#gridStage是一个更大的div,里面包含一个较小的div #point.

我想在用户点击时调用正确的函数,如果#point用户点击任何地方#gridStage但没有点击,则要调用另一个错误的函数#point.

问题是,当用户点击时#point,jQuery还检测到点击,#gridStage因为这两个函数都被调用,这是不需要的.

目前我可以使用以下代码执行此操作:

var pointClick=0;
$(".point").click(function() {
var pointClick=1;
    correct();
    setTimeout(function() {
       pointClick=0;
    },1000);
});
$("#gridStage").click(function() {
setTimeout(function() {
       if(pointClick===0) {
           wrong();
       }
    }, 500);
});

但我知道这是一种效率低下的方式,那么还有其他好的解决方案吗？

注意:我想做的就是我有一个网格作为图像,然后我在它上面叠加了一个div我想检测用户是否点击了一个正确的点,我将div放在正确的点上覆盖网格的顶部,现在我必须检测他的点击是正确的点还是noyt.所以如果你有一个更好的布局,除了上面我正在使用的,你可以自由地建议.

Answer 1

你需要停止传播.

$(".point").click(function(e) {
    correct();
    e.stopPropagation();
});
$("#gridStage").click(function() {
    wrong();
});

(注意e线上的参数$(".point").click(function(e) {和e.stopPropagation();)