防止空格按鈕觸發jQuery中的任何其他按鈕單擊

Question

我有一個應用程序，我使用空格鍵在窗口的任何位置切換功能。 但是，如果任何其他按鈕或復選框具有焦點，則也會單擊該按鈕或復選框。

我試過preventDefault（）但是沒有按預期工作。 當我按空格鍵時，如何確保屏幕上沒有其他元素被點擊？

HTML

<button class="buttons" id="playBtn">PLAY</button>

JS （根據使用防止默認值更新接管空格鍵

$(document).keypress(function(event){
    var keycode = (event.keyCode ? event.keyCode : event.which);

    if(keycode == '32') {
        if (event.stopPropagation) {
            event.stopPropagation();
            event.preventDefault();
        }
        playBtn_DOM.click();
    } else if (keycode == '97') {
        event.preventDefault();
        prevBtn_DOM.click();
    } else if (keycode == '100') {
        event.preventDefault();
        nextBtn_DOM.click();
    }
});

並且關於回答使用防止默認接管空格鍵 ，該解決方案不起作用。 我已經更新了JS代碼，以表明我嘗試了包含那里給出的解決方案。

Answer 1

我也遇到了這個問題，經過一番擺弄后發現它是觸發按鈕點擊的keyup 。 我做了一個演示這個的小提琴： https ： //jsfiddle.net/Beppe/o6gfertu/1/ 。 它適用於Firefox和Chrome，雖然在后者中按鈕會改變外觀以使其看起來很緊湊。

Answer 2

簡單地使用

$(element).blur();

在聚焦時對任何元素（如按鈕）進行非聚焦（如按鈕的單擊事件）。

Answer 3

一旦聚焦（例如通過點擊），這將從所有按鈕中移除焦點。 這將阻止空格鍵激活按鈕。

document.querySelectorAll("button").forEach( function(item) {
    item.addEventListener('focus', function() {
        this.blur();
    })
})

Answer 4

我找到了一個相對hacky解決方案。 歡迎更好的答案！

$(document).mousemove(function(event){ if (document.activeElement != document.body) document.activeElement.blur(); });

基本上，它會檢查鼠標是否在文檔正文中的任何位置。 如果是，那么它會模糊任何其他具有焦點的元素。

Answer 5

對於那些在可點擊的DIV中的某些文本輸入中期望SPACE的人。 試試這個：

HTML：

<div id="someClickableDiv" onclick="doSomething()">
    <textarea onkeyup="event.preventDefault()"></textarea>
</div>

或Angular 6版本：

<div id="someClickableDiv" (click)"doSomething()">
    <textarea (keyup)="$event.preventDefault()"></textarea>
</div>