javascript - 检测键盘箭头键按下了多长时间？

Question

我知道如何通过这种方式检测 Javascript 中按下的键:

$(document).keydown(function(e) {
    switch(e.which) {
        case 37: // left
        break;

        case 38: // up
        break;

        case 39: // right
        break;

        case 40: // down
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
});

我想知道我们是否可以检测到我需要处理的滚动功能按下箭头键的时间。

Answer 1

捕获 keydown 事件，启动计时器，并在 keyup 事件上停止计时器。

(function() {
   var PRESSING = false;
   var timer;

   $(document).keydown(function(e) {

      //Ignore repeated event to be fired.
      //otherwise it will reset timer.
      if(e.which === 38 && PRESSING) {
         return e.preventDefault();
      }

      //Start timer
      timer  = Date.now();          
      console.log("Key press");
      PRESSING = true;
   });

   $(document).keyup(function(e) { 

      //On arrow key up, stop timer and log result
      if(e.which === 38) {
         PRESSING = false;
         var time = Date.now() - timer;
         console.log("Key pressed for " + time/1000+ "sec");
      }
      e.preventDefault();
   })
}());

示例 http://jsbin.com/vowabiqelu/edit?js,console,output