检测键盘箭头键被按了多长时间

Detect how long the keyboard arrow key has been pressed?

本文关键字：长时间 键盘 检测      更新时间：2023-09-26

我知道如何在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)
});

我想知道是否有可能我们可以检测箭头键被按了多长时间，只是为了我需要处理的滚动功能

捕捉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、控制台、输出

据我所知，如果您正在制作滚动功能，您应该开始滚动keydown并停止keyup。keyup事件可以在keydown事件中设置。

提供一个jsfiddle，我可以帮你。

        var pressed = null;
            $(element).on('keydown', function(event) {
                 pressed = +new Date();
                  // do whatever else you need upon key down
                 });
           $(element).on('keyup', function(event) {
        var duration = +new Date() - pressed;
         pressed = null;
        // do whatever you need to do based on the duration of the press
      });
相关文章：