In chrome and firefox (and maybe others), if you've got an input focused, pressing "space" and "enter" clicks them for you. I'm making an HTML 5 game and I want to rewrite how space and enter reacts on focus and the default behavior is getting in my way. Is there a way to turn this default behavior off in most browsers?

Here's a jsfiddle demonstrating the problem.

<button>Button<button>
$("button").on("click", function(event) { alert("Clicked"); });

If you click on the button, it displays the alert which is good. But if you press "space" or "enter" after you click it, it also alerts. I want to prevent this behavior so that I can write my own without them interfering.

In chrome and firefox (and maybe others), if you've got an input focused, pressing "space" and "enter" clicks them for you. I'm making an HTML 5 game and I want to rewrite how space and enter reacts on focus and the default behavior is getting in my way. Is there a way to turn this default behavior off in most browsers?

Here's a jsfiddle demonstrating the problem.

<button>Button<button>
$("button").on("click", function(event) { alert("Clicked"); });

If you click on the button, it displays the alert which is good. But if you press "space" or "enter" after you click it, it also alerts. I want to prevent this behavior so that I can write my own without them interfering.

• javascript
• jquery
• html

• If you have your own handler for keyboard events, make sure they return false to prevent default action. – Barmar Commented Dec 30, 2013 at 23:09
• @Barmar oh, that may be the answer I'm looking for – Daniel Kaplan Commented Dec 30, 2013 at 23:13
• 1 @Barmar return false; is a little bit overkill though, since it will trigger an event.stopPropagation() as well. event.preventDefault() is what OP needs. – Johan Commented Dec 30, 2013 at 23:14
• @Barmar Neither of your suggestions seem to be working for me. See my update: jsfiddle/zmH5V/5 Now when I press space, it fires both. – Daniel Kaplan Commented Dec 30, 2013 at 23:23
• @Johan Your suggestion didn't work for me. See jsfiddle/zmH5V/6 When I press space, both get handlers get triggered. – Daniel Kaplan Commented Dec 30, 2013 at 23:25

3 Answers 3

You can fix this by using event.detail. That will return the amount of times the button has been clicked. If you press enter, this returns 0, since you clicked it 0 times, and if you click it via your mouse, it returns the amount of times you clicked the button.

To access event.detail, you need to access the original event object. This can be done via event.originalEvent in the jQuery event object. So, if you just put an if statement in your script:

if (event.originalEvent.detail != 0) {
    //your click event code
}

then it'll only run if you actually click the button via your mouse.

This will be much more accurate than checking if the button has :focus, since the button automatically gets focused when you click it, so doing that would disable the button after a single click.

Check if a button is active:

$("button").on("click", function(event) { alert("Clicked"); });

$(document).on('keydown', function(e){

    if($(document.activeElement).is('button') && 
                                         (e.keyCode === 13 || e.keyCode === 32)) 
        e.preventDefault();
});

You could also use jQuery's :focus selector, which should return the same element, $(':focus').is('button').

http://jsfiddle/zmH5V/4/

other option, is to blur the object right after clicking it:

<button id="mybutton" onclick="myFunction();this.blur();">button</button>

I find that solution easier to use, because it requires less code-lines, and gets the same results: while the button is blured, it has no contact with the keyboards events, and that solves the problem.