javascript - 点击事件大部分时间不起作用

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

我建议不要使用“click”和“tap”事件，而是使用“mousedown”和“tap”事件touchstart”。至少click事件需要mousedown和mouseup事件发生在同一个元素上。如果您单击特定的移动元素，则会在此元素上触发 mousedown 事件，但是当目标元素移离单击位置时再次释放鼠标时，mouseup 会触发在 body 元素或元素后面的任何元素上，这样元素上就不会发生完整的 click 事件。

在您的代码中，这需要进行以下更改:

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

这是代码的更改版本，用于测试更改:Code Pen