Question

我搜索它并找到了很多答案，但都没有用，因为我还是JQuery的新手。实际上，我正在创建一个重制动物游戏，并且我必须检测到他在图像外的点击，如果用户在图像外单击，则分数会降低10。我尝试了很多事情，但没有任何效果。您可以在以下位置查看代码：我认为您必须通过运行代码来理解这一点。 https://github.com/ayushcs/molegame

我正在提供HTML结构：

<div class="game_top">
            <div id="wrap" class="wrap">
                <div class="gamewrap">
                    <div class="hole hole_1"><img src="wack.gif" class="wack" style="display: none;">
                        <div class="thing thing_1" id="thing_1">
                        //In this thing class images are coming dynamically.
                        </div>
                    </div>
                    <!--end_hole_1-->
                    <div class="hole hole_2"><img src="wack.gif" class="wack" style="display: none;">
                        <div class="thing thing_2" id="thing_2">
                        </div>
                    </div>
                    <!--end_hole_2-->
                    <div class="hole hole_3"><img src="wack.gif" class="wack" style="display: none;">
                        <div class="thing thing_3" id="thing_3">
                        </div>
                    </div>
                    <!--end_hole_3-->
                    <div class="hole hole_4"><img src="wack.gif" class="wack" style="display: none;">
                        <div class="thing thing_4" id="thing_4">
                        </div>
                    </div>
                    <!--end_hole_4-->
                    <div class="hole hole_5"><img src="wack.gif" class="wack" style="display: none;">
                        <div class="thing thing_5" id="thing_5">
                        </div>
                    </div>
                    <!--end_hole_5-->
                </div>
                <!--gamewrap-->
            </div>
        </div>
        <div class="game_bottom">
        </div>

Answer 1

检查此代码：

$(document).mouseup(function(e) {
    var container = $("#imageContainer"); //it should be your image id

    if (!container.is(e.target) && container.has(e.target).length === 0) {
        //decrement score here by 10 marks
    } else {
        //Increment score here by 10 marks.
    }
});

希望这对您有所帮助。

我已经检查了您的代码。请替换以下功能，并检查其是否适用：

function MakeGameBoard() {
  var things = 5;
  var code = "";

  for (var thing = 1; thing < things + 1; thing++) {
      code = '<div class="img-game" id="img_' + thing + '"> <img src="" class="img-block"/>  </div>';
    $('#thing_' + thing).html(code);
  }

  $('.yellow-block').mouseup(function() {
    score = score + 15;
  });


  var fairTouch = 0; 
  $('.img-block').on('mousedown', function(e) {
    fairTouch = 1;
    var nav = $(this);
    if (nav.length) {
      var contentNav = nav.offset().top;
      if($(this).attr('src')=='animal_2.png'){
        score=score+15;
      } else if (contentNav > 270 && contentNav <= 361){
        score = score + 5;
      } else if (contentNav > 225 && contentNav <= 270) {
        score = score + 10;
      } else if (contentNav >= 204 && contentNav <= 225) {
        score = score + 15;
      } else alert("ye");
    }
  });
    $(document).mouseup(function(e) {
        if (fairTouch != 1) {
            console.log('reducing');
            score = score - 15;
            if (score < 0) {
                score = 0;
            }
            Wackathing();
        } 
        fairTouch  = 0;
    });

}

它应该对您来说很好。

如何在jQuery中检测div外部的点击

1 个答案: