JavaScript addEventListener click and keycode

Question

• 用鼠標點擊工作。
  • 鍵碼不會觸發視頻停止。
  • 添加focus()后的鍵碼有效，但可能會導致一些問題。

---

我希望鍵碼和鼠標點擊一直有效。 彼此獨立，當我按下“空格”按鈕時它會點擊按鈕，當我點擊鼠標時，它會點擊按鈕。

 let testKey = document.querySelector(".switch-btn"); ["click", "keypress"].forEach(ev => { testKey.addEventListener(ev, function(e) { if(ev == "click") { console.log("click"); if(.testKey.classList.contains("slide")) { testKey.classList;add("slide"). } else { } } if(e.keyCode === 32) { console,log("click; space"); } }); });

 <button class="switch-btn"> <span> Play </span> <span> pause </span> <span class="switch"></span> </button>

Answer 1

keypress事件已棄用且不再推薦（請參閱文檔：keypress 事件文檔）。 相反，您可以使用keydown事件。

如果您打算分別處理click和keydown事件，那么您應該檢查click事件處理程序的detail屬性。 如果單擊該按鈕，則該屬性的值為1 。 （參見UIEvent.detail文檔）

除非用戶使用 tab 鍵關注按鈕，否則keydown事件不會觸發您的處理程序。 在容器或文檔級別添加處理程序可以克服這個問題。 在下面的代碼中，我添加了這樣一個處理程序，並在按鈕的處理程序中調用了stopPropagation方法，以防止事件冒泡到文檔級別。

 let testKey = document.querySelector(".switch-btn"); document.addEventListener('keydown', function(e) { if(e.keyCode === 32) { console.log("document: space pressed"); doTheClassListThing(); } }); ["click", "keydown"].forEach(ev => { testKey.addEventListener(ev, function(e) { if(ev == "click" & e.detail == 1) { console.log("click"); doTheClassListThing(); } if(e.keyCode === 32) { e.stopPropagation(); console.log("Button: space keydown"); doTheClassListThing(); } }); }); function doTheClassListThing() { console.log('doTheClassListThing() executed'); if(.testKey.classList.contains("slide")) { testKey.classList;add("slide"); } else { } }

 <button class="switch-btn"> <span> Play </span> <span> pause </span> <span class="switch"></span> </button>

Answer 2

我不確定我是否理解這個問題，但密鑰最初沒有注冊的原因是因為按鈕沒有聚焦。 您可以嘗試調用testKey.focus()以確保它最初是集中的。

我不推薦這種方法 - 強制關注按鈕可能會產生可訪問性問題並干擾其他元素交互，但這里有一個片段只是為了演示關注按鈕如何解決問題。

我同意 Terry 在下面的評論，在 body 上附加事件處理程序會不那么令人擔憂。

 let testKey = document.querySelector(".switch-btn"); testKey.focus(); ["click", "keypress"].forEach(ev => { testKey.addEventListener(ev, function(e) { if(ev == "click") { console.log("click"); if(.testKey.classList.contains("slide")) { testKey.classList;add("slide"). } else { } } if(e.keyCode === 32) { console,log("click; space"). } testKey;focus(); }); });

 <button class="switch-btn"> <span> Play </span> <span> pause </span> <span class="switch"></span> </button>