HTML<video> 標簽 - 沒有控件屬性未接收到的關鍵事件 | Event#preventDefault 不取消控制</video>

Question

我試圖顯示帶有自定義控件的視頻。 它似乎工作正常，但我有一個問題。 當我嘗試偵聽關鍵事件時， controls屬性似乎會導致問題。

我目前有這段代碼用於測試：

const video = document.getElementById("video");

video.addEventListener("keypress", (event) => {
    console.log("keypress");
    console.log(`  Key: ${event.which}`);
    
    event.preventDefault();
});

我也為keydown做了同樣的事情，但它有同樣的問題。 問題是兩件事之一：

• 如果<video>標簽沒有controls屬性：永遠不會收到事件，因此永遠不會將消息打印到控制台。
• 如果<video>標簽有controls屬性：事件被接收，消息被打印到控制台，但是event.preventDefault()調用並沒有停止具有controls屬性引起的行為，所以我仍然可以播放/使用空格暫停視頻（它確實阻止我使用回車，出於某種原因），使用左/右箭頭鍵搜索，並使用上/下箭頭鍵調整音量。

問答：

• 問：您是否嘗試過不對視頻元素本身的事件做出反應，而是像包裝 div 之類的東西？ 不確定這是否會有所不同，但我認為這可能值得一試。
• 答：是的。 我確實嘗試過，但不幸的是，它僅在焦點位於我的自定義控制按鈕上時才收到關鍵事件。

我試圖在過去的一天中找到解決方案，但無濟於事。 如果您有任何建議，請告訴我。

Answer 1

在通過評論來回輸入之后，我終於讓它工作了。

在捕獲階段偵聽文檔上的keydown事件允許我使用event.preventDefault() 。 我只需要添加一些條件，這樣它就不會取消文檔中的所有按鍵。

const video = document.getElementById("video");

document.addEventListener("keydown", (event) => {
    if (event.target !== video) return;
    
    // Space has keyCode 32
    if (event.which === 32) event.preventDefault();
}, true);