如何在同一事件Javascript中侦听click事件

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() 在这里 。