[英]How to listen for click event inside same event Javascript
我想要的是讓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;
}
});
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()
在這里 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.