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＆amp;我想检测一个用户是否点击了一个正确的点，我将div放在覆盖网格顶部的正确点上，现在我必须检测他的点击是否正确点或noyt。因此，除了我正在使用的上述内容之外，如果你有更好的布局，你可以自由地建议。

Answer 1

您需要停止传播。

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

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

jquery检查是否单击了div

1 个答案: