Question

我正在尝试用箭头键做一个简单的移动脚本，但是我有一个奇怪的行为：

- 如果我向右按下很长时间，那么圆圈会快速向右移动

- 如果我做短按，脚本按预期工作

- 我假设长按正确更新功能并使其按指数更新

- 我仍然不知道为什么onkeyup甚至在长按后停止注册。

代码是：

var circle = document.createElement("div");
     circle.style.borderRadius = "50%";
     circle.style.width = "100px";
     circle.style.height = "100px";
     circle.style.position = "absolute";
     circle.style.backgroundColor = "#99CC00";
     circle.id = "green_circle";
     document.body.appendChild(circle);

var greenCircle = document.getElementById("green_circle");

//Movement Interval:
var xPosition = 1
function rightMovement(){
    circle.style.left = (xPosition + "px");
    xPosition++;
    console.log("xPosition is: "+xPosition);
}
//Interval Initializers and stoppers -
function moveRight(){
    startRight = setInterval(rightMovement,1);
}  

function stopMovingRight(){
    clearInterval(startRight);
    console.log("onkeyup stop register")
}

//Event Keybinding
document.onkeydown = function(){
    var r = event.keyIdentifier;
    if(r == "Right"){
    moveRight();
    }
}

document.onkeyup = function(){
    var i = event.keyIdentifier;
    if(i == "Right"){
        stopMovingRight();
        console.log(i);
    }
}

I have js fiddle

Answer 1

按住键时，代码会多次启动。使用布尔值检查圆圈是否已经移动。

检查此FIDDLE

moving=false;
function moveRight(){
  if(!moving){ //Start an interval only if there is none active
    startRight = setInterval(rightMovement,1);
    moving=true;
   }
}

document.onkeyup = function(){
 var i = event.keyIdentifier;
  if(i == "Right"){
    stopMovingRight();
    moving=false; // interval deactivated, start upon next keydown
    console.log(i);
 }
}

Answer 2

您的方法moveRight()被多次触发。这是因为按住某个键时会多次触发onkeydown事件。您可以通过设置键已关闭的标记来解决此问题，以便moveRight()不会多次触发。

每次调用moveRight()时，都会设置一个间隔。我还建议您在脚本顶部初始化startRight变量，以确保您不会收到任何错误。像这样：

var startRight = null;

Div绝对位置脚本 - onkeyup甚至不会注册

2 个答案: