jQuery如何检测div是否被点击

Question

I have the following html code:

<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，以代表正确的点，现在我需要检测他的点击是否在正确的点上。如果你有比我使用的方法更好的布局，请自由提出建议。

- gopi1410

Answer 1

您需要停止事件传播。

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

(注意代码中的e参数，它在$(".point").click(function(e) {这一行中出现，并且还有e.stopPropagation();)

- h2ooooooo