js キーボードイベントキーの組み合わせの繰り返しのトリガーと使用を防ぐための keydown イベント

トリガーの繰り返しを防ぐための js キーボードイベント keydown イベント

キーボードイベントには、主に 3 つのタイプがあります: keydown、~~keypress(推奨されません。一部のブラウザはこれを放棄しています)~~ 、およびkeyup。

通常のキーボードのキーダウンイベントを追加

// 监听键盘按下事件
  document.addEventListener('keydown', function(event) {
    
    
    // 输出按下的键的键码
    console.log('Key pressed:', event.key, 'Key code:', event.keyCode);
  });

ただし、キーを放さないとこのイベントが繰り返し発生します。

キーダウンイベントが繰り返しトリガーされるのを防ぐ

①フラグ変数を使用してボタンの状態を追跡する

let keyDownFlag = false;

  // 监听键盘按下事件
  document.addEventListener('keydown', function(event) {
    
    
    if (!keyDownFlag) {
    
    
      keyDownFlag = true;
      console.log('Key pressed:', event.key, 'Key code:', event.keyCode);
    }
  });

  // 监听键盘释放事件
  document.addEventListener('keyup', function() {
    
    
    keyDownFlag = false;
  });

②イベントの属性で判定
repeatキーを押し続けることでキーボードイベントが連続して発生するかどうかを属性で判定できます。

// 监听键盘按下事件
  document.addEventListener('keydown', function(event) {
    
    
    if (!event.repeat) {
    
    
      console.log('Key pressed:', event.key, 'Key code:', event.keyCode);
    }

この例では、event.repeat プロパティを使用して、キーが押されたことによってイベントがトリガーされたかどうかを確認します。events.repeat が false の場合、これは継続的にトリガーされるイベントではなく、新しいキーイベントであることを意味します。

コンポーネントキーの使い方

コンポーネントキーは通常、keydown イベントを通じてトリガーされます。

document.onkeydown = function (oEvent) {
    
    
    console.log(oEvent);
}

ここに画像の説明を挿入します
イベントオブジェクトには多くの情報が返されていることがわかります。keycode 属性には、キーボード上の対応する ASCII コード、typeトリガーされるイベントのタイプなどのコードが含まれています。

ここでは、使用できる属性がいくつかあります。つまり、altkey属性、ctrlkey属性、およびですshiftkey。キーボードのalt、ctrl、shiftキーによるイベントトリガーの判定を表します。これらのキーによってイベントがトリガーされると、その値が true になり、
これらのプロパティと組み合わせた上記のコンテンツを通じてキーボードイベントをリッスンすることができます。

たとえば、ctrl + sの組み合わせイベントをリッスンしたいとします。

document.onkeydown = functionb(oEvent) {
    
    
  var oEvent = oEvent || window.oEvent; 
  //获取键盘的keyCode值
  var nKeyCode = oEvent.keyCode || oEvent.which || oEvent.charCode;
  //获取ctrl 键对应的事件属性
  var bCtrlKeyCode = oEvent.ctrlKey || oEvent.metaKey;
   if( oEvent.nKeyCode == 83 && bCtrlKeyCode  ) {
    
    
      alert('save');
       //doSomeThing...
   }
}

たとえば、Alt+q の組み合わせイベントをリッスンしたいとします。

document.onkeydown = functionb(e) {
    
    
	if(e.altKey && e.keyCode == 81){
    
    
	      if(e.repeat){
    
    
	        return 
	      }
	      //todo somethink
    }
}

Mac コンピュータの操作は通常の Windows コンピュータとは異なりますが、Alt キーがないわけではありません。Mac コンピュータで Alt キーを見つけるのは難しくありません。キーボードの左下隅にあるオプションキーは、実際には Apple の Alt キーです。その隣のコントロールキーは、PC コンピュータの Ctrl キーに対応します。コマンドキーwinキーに対応します。