javascript - 单击按钮几次会导致页面被阻止

Question

当您单击按钮时，页面应向下滚动到 id="myTarget"的 div。

这是我的 HTML:

<button class="go"> GO </button>
<div id="myTarget">
   <p>
        la lalal lalala lalala 
    </p>
</div>

和jquery:

$(function() {
  $(".go").on('click', function(event) {
     event.stopPropagation();
    $('html, body').animate({ 
        scrollTop: $("#myTarget").offset().top  }, 3000);
 });
});

我的问题是，当您单击按钮几次时，页面会向下滚动。之后就无法向上滚动了。有什么办法可以在页面移动时停止点击事件吗？

JsFiddle

Answer 1

如果使用鼠标滚轮时停止动画？

$(function() {
      $(".go").on('click', function(event) {
         event.stopPropagation();
        $('html, body').animate({ 
            scrollTop: $("#myTarget").offset().top  }, 3000);
     });

});
var page = $("html, body");
page.on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function(){
       page.stop();
});

Demo