美文网首页
JS键盘事件 长按停顿问题

JS键盘事件 长按停顿问题

作者: 萌三蛋子geocsj | 来源:发表于2017-07-17 10:14 被阅读230次

    问题描述:用js的键盘事件控制一个div移动,当按下一个方向键不放,div会先停顿一下,然后才开始持续移动。(原因:系统要区分用户是否连续输入,第一个到第二个之间有一个停顿时间)

    解决方法:计时器、onkeyup和onkeydown事件相结合

    var timer = null;
    
    var left = false;
    
    var right = false;
    
    var top = false;
    
    var bottom = false;
    
    setInterval(function(){
    
        if(left){
    
            oDiv.style.left = oDiv.offsetLeft-10+"px";
    
        }else if(top){
    
            oDiv.style.top = oDiv.offsetTop-10+"px";
    
        }else if(right){
    
            oDiv.style.left = oDiv.offsetLeft+10+"px";
    
        }else if(bottom){
    
            oDiv.style.top = oDiv.offsetTop+10+"px";
    
        }
    
    },50);
    
    document.onkeydown = function(ev){
    
        var ev = ev || event;
    
        var keyCode = ev.keyCode;
    
        switch(keyCode){
    
           case 37: left = true;break;
    
           case 38: top = true;break;
    
           case 39: right = true;break;
    
           case 40: bottom = true;break;
    
        }
    }
    
    document.onkeyup = function(ev){
    
        var ev = ev || event;
    
        var keyCode = ev.keyCode;
    
        switch(keyCode){
    
           case 37: left = false;break;
    
           case 38: top = false;break;
    
           case 39: right = false;break;
    
           case 40: bottom = false;break;
    
        }
      }
     }
    

    相关文章

      网友评论

          本文标题:JS键盘事件 长按停顿问题

          本文链接:https://www.haomeiwen.com/subject/jzlfkxtx.html