如何在同一事件中监听点击事件 Javascript

Question

我想要的是让 div 元素四处移动，直到再次单击它，然后它应该停在当前位置。是否有特定的方式来监听事件中的同一个事件？移动 div 不是问题。我只是不知道如何让它停止。任何人都可以向我解释为什么我的东西不起作用吗？

var clickTracker = false;

$("#div3").click(function() {
     if(clickTracker === false){
        var width = $(window).width();
        var height = $(window).height();
        for(var i = 0; i < 1000; i++){
            const randomLeft = Math.floor(Math.random() * (width - 200))-1;
            const randomHeight = Math.floor(Math.random() * (height - 200))-1;
            $("#div3").animate({left: '+='+randomLeft}, 500).animate({top: '+='+randomHeight}, 500);                            
            $("#div3").click(function() {
                clickTracker = true;
                break;
            });         
        }
    }
    else{
        clickTracker = false;
    }
});

Answer 1

var clickTracker = false;

$("#div3").click(function() {
  if (clickTracker === false) {
    clickTracker = true;
    var width = $(window).width();
    var height = $(window).height();

    for (var i = 0; i < 10; i++) {
      const randomLeft = Math.floor(Math.random() * ((width - currentPos.left) - 200)) - 1;
      const randomHeight = Math.floor(Math.random() * ((height - currentPos.top) - 200)) - 1;

      console.log("putting stuff in animation queue");
      $("#div3").animate({
        left: '+=' + randomLeft
      }, 5000).animate({
        top: '+=' + randomHeight
      }, 5000);
    }
  } else {
    clickTracker = false;
    $("#div3").stop(true);
  }
});

#div3 {
  width: 100px;
  height: 100px;
  background: black;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div3"></div>

我理解为什么您首先想到的是在 for-loop 中调用点击功能，但如果您在第二次点击后查看控制台，您会发现您使用的是 break 错误的方式——通过调用一个新函数，你正在改变作用域，而 break 语句试图跳出函数（你不能这样做，你必须使用return ）而不是循环。为同一个事件设置两个处理程序也不是一个好主意。那种事情往往会使计算机感到困惑。 :)

还可能值得指出的是，for loop 可能不会像您认为的那样工作。它实际上在做什么（如果您查看代码片段的控制台，您可以看到这一点）正在填充 div 的动画队列。该循环运行十次（为了我的理智，我将其更改为十次），生成一个随机数，然后将其放入 div 的位置列表中，所有这些都在几毫秒内完成。你可以把它想象成：$("#div3").animate().animate().animate() ... etc 但这里要注意的重要一点是你永远不会在 for loop 结束之前点击那个 div。

继续阅读 stop() here。

如何在同一事件中监听点击事件 Javascript

How to listen for click event inside same event Javascript

javascript

events

click

event-handling

jquery-animate