防止空格按钮触发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

对于那些希望在可单击 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>

Answer 4

我找到了一个相对简单的解决方案。欢迎更好的答案！

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

基本上，它检查鼠标是否位于文档正文中的任何位置。如果是，那么它会模糊任何其他具有焦点的元素。