按下某個鍵時如何觸發按鈕？

Question

          ...
          <div className="wrap">
          <div id="tiles" className="columns">
          <div id="ti">
       <button id ="Q" className='drum-pad'>Q</button>
       <button className='drum-pad'>W</button>
       <button className='drum-pad'>A</button>
       <button className='drum-pad'>S</button>
       <button className='drum-pad'>D</button>
       <button className='drum-pad'>S</button>
       <button className='drum-pad'>Z</button>
       <button className='drum-pad'>X</button>
       <button className='drum-pad'>C</button>

       </div>
       </div>
         ...

您好，我想在按下 Q 鍵時觸發第一個按鈕，以此類推，使用 WASD 等，但我無法找到這樣做的方法，您能幫幫我嗎？

Answer 1

你要求的是當你按下 Q 鍵時觸發一個按鈕。 您可以在按下 Q 而不是觸發按鈕時直接觸發功能，但代碼如下：

 var qkey = document.getElementById("Q"); //get the button element function triggerQ(){ //trigger a click on the button qkey.click(); } function log(){ console.log("Q pressed"); //log a message on console } window.addEventListener('keydown',function(event) { //check if Q pressed if (event.key == "q"){ triggerQ(); } });

 <input type="button" id="Q" value="Q" onclick="log()">

Answer 2

您可能有一個 keydown 事件的處理程序，當觸發該事件時，它將遍歷所有可用的.drum-pad元素，並將鍵入的字符與每個單擊的字符進行比較，單擊哪個字符的 innerText 與按下的鍵匹配：

 /** * This part only adds a click event handler to all the .drum-pad * that will print out on console which pad was just clicked * (the event gets fired both when the button is actually clicked with mouse * ..and when the corresponding character gets pressed) */ //when the page is loaded document.addEventListener('DOMContentLoaded', () =>{ //for each element having the drum-pad class document.querySelectorAll('.drum-pad').forEach((o, i)=>{ //adds the handler for the click event for the current element in the loop o.addEventListener('click', (event)=>{ //print out on console which pad triggered the click event console.log(`Clicked Pad: ${event.target.innerText}`); }); }); }); //when the event keydown gets fired on window (the page in the browser) window.addEventListener('keydown', function(event) { //get all the elements having the drum-pad class const pads = document.querySelectorAll('.drum-pad'); //for each on of them for(let pad of pads){ //get the innerText of the current element in the loop const keypad = pad.innerText; //if the pressed key is equal to the current element in the loop if (event.key.toLowerCase() == keypad.toLowerCase()){ //toggle the active status on the current button pad.classList.toggle('active'); //fire the click event on the element pad.click(); //wait 100ms and then toggle again the active status for the current button setTimeout( ()=>{pad.classList.toggle('active')}, 100); //exit the event handler return; } } })

 button:active, button.active { box-shadow: box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24); transform: translateY(4px); }

 <button class='drum-pad'>Q</button> <button class='drum-pad'>W</button> <button class='drum-pad'>A</button> <button class='drum-pad'>S</button> <button class='drum-pad'>D</button> <button class='drum-pad'>S</button> <button class='drum-pad'>Z</button> <button class='drum-pad'>X</button> <button class='drum-pad'>C</button>