我试图在“mousedown”上触发动画,并在释放鼠标后立即停止它。
在“mousedown”上,我将一个标志设置为 true,这设置了单击相应按钮的动画的条件。问题出在“mouseup”上,我将标志设置为 false 但动画不会停止。我的控制台中没有收到任何错误,因此这似乎是一个基于逻辑的错误。
我的错误是什么?我该如何解决这个问题?
https://jsfiddle.net/b4kn4w3g/2/
基本代码:
function eventBundle(e) {
if (e.target !== e.currentTarget) {
if (e.target == parent.children[0]) {
isDown = true;
amount = "reduce";
} else if (e.target == parent.children[1]) {
isDown = true;
amount = "increase";
}
}
e.stopPropagation();
}
window.addEventListener("mouseup", function(){
isDown = false;
amount = "neutral";
});
function holdStuff() {
if (isDown == true && amount == "increase") {
maxValue += 100;
} else if (isDown == true && amount == "reduce") {
maxValue -= 100;
}
requestAnimationFrame(holdStuff)
}
最佳答案
将 maxValue = minValue
添加到您的 mouseup
事件监听器。问题在于,您的更新函数随着 minValue += 5;
和 minValue -= 5;
增量(值 5)增加或减少。当您将最大值增加或减少 100 时,它最终必须以 5 的增量达到该值。将 maxValue 设置为当前的 minValue 会停止当前状态的更改。
window.addEventListener("mouseup", function(){
maxValue = minValue;
isDown = false;
amount = "neutral";
});
关于Javascript:将标志设置为 false 时简单动画不会停止,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34519543/