单击事件大部分时间不起作用

Question

我想用jquery在html中构建一个简单的游戏。游戏概念是会有硬币从上到下掉落。用户必须通过单击或点击来收集硬币。我使用 Animate 对放置框进行动画处理，但当我尝试单击它时，大部分时间都不起作用。请帮助我如何在桌面和移动设备上解决此问题。

$(document).ready(function() {
  // Snow Falling
  function fallingSnow() {
    //Adjust the Screen Areas
    $('#site').width(0);
    $('#site').height(0);
    $('#site').width($(window).width());
    $('#site').height($(window).height());
    var $snowflakes = $(),
      createSnowflakes = function() {
        $('.snowflakes').remove();
        var qt = 5;
        for (var i = 0; i < qt; ++i) {
          var $snowflake = $('<div class="snowflakes"></div>');
          $snowflake.css({
            'left': (Math.random() * $('#site').width()) + 'px',
            'top': (-Math.random() * $('#site').height()) + 'px'
          });
          // add this snowflake to the set of snowflakes
          $snowflakes = $snowflakes.add($snowflake);
        }
        $('#snowZone').prepend($snowflakes);
      },
      runSnowStorm = function() {
        $snowflakes.each(function() {
          var singleAnimation = function($flake) {
            var speed = Math.random(); // 1 is Faster 0 is Slower
            // 0.6 is Slowest, 0.8 is Normal, 1 is Fastest
            var p = 0;
            //Adjust Points and Speed Below
            if (speed > 0.8) {
              speed = 1;
              p = '100';
            } else if (speed > 0.6 && speed < 0.8) {
              speed = 0.8;
              p = '080';
            } else if (speed < 0.6) {
              speed = 0.6;
              p = '060';
            }
            speed = 0.1;
            $flake.attr("class", 'snowflakes');
            $flake.addClass('p' + p);
            $flake.animate({
              //top: "500px",
              top: $('#site').height(),
              opacity: "1",
              //}, Math.random()*-2500 + 3000, function(){
            }, 0.9 * -2500 + 6000, function() {
              //}, speed*-2500 + 9000, function(){
              // this particular snow flake has finished, restart again
              $flake.css({
                'left': (Math.random() * $('#site').width()) + 'px',
                'top': (-Math.random() * $('#site').height()) + 'px',
                'opacity': 0.5
              });
              singleAnimation($flake, speed);
            });
          };
          singleAnimation($(this), 0.1);
        });
      };
    createSnowflakes();
    runSnowStorm();
  }
  fallingSnow();
  $(window).resize(function() {
    fallingSnow();
  });


  curScore = 0;
  $('.score').text(curScore);
  $('body').on('click tap', '.snowflakes', function() {
    curScore++;
    $('.score').text(curScore);
    console.log('Clicked ' + $(this).attr('class') + ' ' + Math.random());
  });



});

body {
  margin: 0;
}
.snowflakes {
  top: 0px;
  left: 0px;
  position: absolute;
  z-index: 200;
  width: 50px;
  height: 50px;
  background: white;
  -webkit-box-shadow: 0px 10px 5px 0px rgba(0, 0, 0, 0.20);
  -moz-box-shadow: 0px 10px 5px 0px rgba(0, 0, 0, 0.20);
  box-shadow: 0px 10px 5px 0px rgba(0, 0, 0, 0.20);
  cursor: pointer;
}
body {
  background-color: yellow;
}
#site {
  width: 500px;
  height: 500px;
  margin: 0 auto;
  padding: 0;
  position: relative;
  overflow: hidden;
  background: grey;
}
.snowflakes.p100 {
  background: green;
}
.snowflakes.p080 {
  background: blue;
}
.snowflakes.p060 {
  background: pink;
}
#site .score {
  position: absolute;
  z-index: 400;
  top: 0;
  left: 0;
  width: 100px;
  height: 50px;
  background: orange;
  color: white;
  font-size: 24px;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="site">
  <div id="snowZone"></div>
  <p class="score">20</p>
</div>

Answer 1

我建议不要使用"单击">和"点击">事件，而是使用"鼠标向下">和"触摸启动"。至少单击事件要求在同一元素上同时发生鼠标按下和鼠标向上事件。如果单击特定的移动元素，则会在此元素上触发 mousedown 事件，但是当目标元素远离单击位置时再次释放鼠标时，mouseup会在 body 元素或元素后面的任何内容上触发，因此您将不会在该元素上完成click事件。

在您的代码中，这将需要以下更改：

$("body").on("mousedown touchstart", ".snowflakes", function() {
    curScore++;
    $(".score").text(curScore);
    console.log("Clicked " + $(this).attr("class") + " " + Math.random());
 }); 

下面是用于测试更改的代码的更改版本：代码笔