Question

我有一个应用程序，我使用空格键在窗口的任何位置切换功能。但是，如果任何其他按钮或复选框具有焦点，那么也会点击它。

我尝试过preventDefault（）但是没有按预期运行。当我按空格键时，如何确保屏幕上没有其他元素被点击？

HTML 的

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

JS （根据Using prevent default to take over spacebar

更新

$(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();
    }
});

关于回答Using prevent default to take over spacebar，该解决方案无效。我已经更新了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中输入一些文本的空间。试试这个：

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>

防止空格按钮触发jQuery中的任何其他按钮单击

5 个答案: