Prevent space button from triggering any other button click in jQuery

Question

I have an application where I am using the space bar to toggle a function anywhere in the window. However, if any other button or checkbox has focus, then that gets clicked as well.

I tried preventDefault() but that didn't work out as expected. How can I ensure that no other element on the screen gets clicked when I press the spacebar?

HTML

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

JS (Updated according to 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();
    }
});

And with respect to answer Using prevent default to take over spacebar, that solution didn't work. I have updated the JS code to show that I tried including the solution given there.

Answer 1

I also had this problem and after a bit of fiddling found that it's keyup that triggers button clicks. I've made a fiddle that demonstrates this: https://jsfiddle.net/Beppe/o6gfertu/1/. It works in Firefox and Chrome, although in the latter the button changes appearance to look pressed.

Answer 2

Simply use

$(element).blur();

to unfocus any element (like button) when it is focused (like click event for button).

Answer 3

For those who are expecting SPACE in some text input within clickable DIV. Try this:

HTML:

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

Or Angular 6 version:

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

Answer 4

This will remove focus from all buttons as soon as they are focused (e.g. by a click). This will prevent spacebar from ever activating buttons.

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

Answer 5

I found a relatively hacky solution to this. Better answers are most welcome!

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

Basically, it checks if mouse is anywhere in document's body. If yes, then it blurs any other element that has focus.