快捷導(dǎo)航

js鍵盤事件keydown事件、防止重復(fù)觸發(fā)以及組合鍵的配合使用

更新時(shí)間：2024年04月18日 10:11:36 作者：勇敢*牛牛

這篇文章主要給大家介紹了關(guān)于js鍵盤事件keydown事件、防止重復(fù)觸發(fā)以及組合鍵配合使用的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

js鍵盤事件keydown事件，防止重復(fù)觸發(fā)

鍵盤事件類型主要有三種： keydown 、keypress(不建議使用，部分瀏覽器已放棄)和 keyup 。

添加普通鍵盤keydown事件

// 監(jiān)聽(tīng)鍵盤按下事件
  document.addEventListener('keydown', function(event) {
    // 輸出按下的鍵的鍵碼
    console.log('Key pressed:', event.key, 'Key code:', event.keyCode);
  });

但是此事件會(huì)如果不釋放按鍵就會(huì)重復(fù)觸發(fā)，如何阻止呢？

阻止keydown事件重復(fù)觸發(fā)

①使用一個(gè)標(biāo)志變量來(lái)跟蹤按鍵的狀態(tài)

let keyDownFlag = false;

  // 監(jiān)聽(tīng)鍵盤按下事件
  document.addEventListener('keydown', function(event) {
    if (!keyDownFlag) {
      keyDownFlag = true;
      console.log('Key pressed:', event.key, 'Key code:', event.keyCode);
    }
  });

  // 監(jiān)聽(tīng)鍵盤釋放事件
  document.addEventListener('keyup', function() {
    keyDownFlag = false;
  });

②通過(guò)事件自帶的屬性判斷

repeat 屬性可以用于判斷鍵盤事件是否是由按鍵保持按下而持續(xù)觸發(fā)的。

// 監(jiān)聽(tīng)鍵盤按下事件
  document.addEventListener('keydown', function(event) {
    if (!event.repeat) {
      console.log('Key pressed:', event.key, 'Key code:', event.keyCode);
    }

在這個(gè)例子中，event.repeat 屬性被用于檢查是否是由按鍵保持按下而觸發(fā)的事件。如果 event.repeat 為 false，則表示這是一個(gè)新的按鍵事件，而不是持續(xù)觸發(fā)的事件。

組件鍵的配合使用

組件鍵一般就是就是通過(guò)keydown事件來(lái)觸發(fā)

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

可以看到event對(duì)象中返回很多信息，其中keycode屬性中包含一份代碼，是鍵盤上對(duì)應(yīng)的ASCII碼，type是觸發(fā)事件的類型等等…

這里我們有幾個(gè)屬性是我們用的到的，就是altkey屬性和ctrlkey屬性還有shiftkey。它們代表著鍵盤上的alt、ctrl、shift鍵對(duì)于事件觸發(fā)的判斷。當(dāng)事件由這幾個(gè)鍵觸發(fā)時(shí)，它們的值會(huì)變成true.

那我可以通過(guò)上邊的內(nèi)容結(jié)合這幾個(gè)屬性來(lái)監(jiān)聽(tīng)鍵盤事件。

比如要監(jiān)聽(tīng)ctrl + s的組合事件

document.onkeydown = functionb(oEvent) {
  var oEvent = oEvent || window.oEvent; 
  //獲取鍵盤的keyCode值
  var nKeyCode = oEvent.keyCode || oEvent.which || oEvent.charCode;
  //獲取ctrl 鍵對(duì)應(yīng)的事件屬性
  var bCtrlKeyCode = oEvent.ctrlKey || oEvent.metaKey;
   if( oEvent.nKeyCode == 83 && bCtrlKeyCode  ) {
      alert('save');
       //doSomeThing...
   }
}

比如要監(jiān)聽(tīng)Alt+ q的組合事件

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

雖然mac電腦操作有別于普通win電腦，但并不代表沒(méi)有alt鍵。在mac電腦找到alt鍵并不難，鍵盤左下角的option鍵其實(shí)就是蘋果的alt鍵，旁邊的control鍵對(duì)應(yīng)pc電腦的ctrl鍵，command鍵對(duì)應(yīng)是win鍵，

附：判斷按的按鍵是否為ctrl、shift、alt

console.log(ev.ctrlKey);
console.log(ev.shiftKey);
console.log(ev.altKey);

總結(jié)

到此這篇關(guān)于js鍵盤事件keydown事件、防止重復(fù)觸發(fā)以及組合鍵的配合使用的文章就介紹到這了,更多相關(guān)js keydown事件防止重復(fù)觸發(fā)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: