JS鍵盤事件 長按停頓問題

問題描述:用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的鍵盤事件控制一個div移動,當按下一個方向鍵不放,div會先停頓一下,然后才開始持續移動。(原因...
    fa54021d36e2閱讀 2,348評論 0 1
  • 一、DOM 什么是DOM?Document Object Model(文檔對象模型)。DOM是針對HTML和XML...
    空谷悠閱讀 987評論 0 2
  • 基本概念 事件是一些特定動作發生時所發出的信號,JavaScript中的事件是可以被 JavaScript 偵測到...
    Zd_silent閱讀 489評論 0 1
  • 事件對象 鼠標事件 event.clientX在可視區中,鼠標點擊的x坐標 event.clientY在可視區中,...
    LaBaby_閱讀 601評論 0 1
  • 天涯明月刀, 咫尺望穿秋。 相對言歡許, 別離花濺雨。 山水有相逢, 千山無暮雪。 悠悠琴聲鳴, 戚戚百草枯。 孑...
    琴聲悠悠閱讀 262評論 4 2