jquery on trigger keypress event twice

Question

I am working on a video player and I want to control some basic video actions like play, pause, seek via keyboard. So here's the code that I am using for getting the keyboard events.

$("#video_container_div").on("keypress", function (e) {
    e.preventDefault();
    e.stopPropagation();
    switch (e.which) {
    case 32:
        { // space
            console.info("I am in keyboard controls");
            $("#playpausebtn").click();
            break;
        }
    default:
        return;
    }
});
$("#fullscreenbtn").click(function () { //bind click event on fullscreen button
    console.info("I am in fullscreen")
    fullscreenFun();
});

Now the issue I am facing is if user click on fullscreen button and then press space bar, the event fired twicely.http://202.164.44.244/products/trunk/video_player/sample1.htm First it play/pause the video then automatically fired the fullscreen or any last focused event.

If I pressed fullscreen button and then space bar then console displays this:

I am in fullscreen
I am in keyboard controls
I am in fullscreen  

In another stack question someone gave this answer of similar issue

https://stackoverflow.com/a/17936661/1652512

Here's the link of the player :

http://202.164.44.244/products/trunk/video_player/sample1.htm

But I need concrete solution of this. The issue already took my whole day.

Answer 1

Final Edit: Apologies this took a bit, it's midnight and I'm a bit tired.

You're using the wrong event! Ignore what I said about focus and simply replace "keypress" with "keydown" and it should work fine. The focus will remain on the fullscreenbtn but your event will work properly and e.stopPropagation() will be enough to prevent the event from firing multiple times. Your code should read:

$("#video_container_div").on("keydown", function (e) {
    e.preventDefault();
    e.stopPropagation();
    switch (e.which) {
        case 32:
        { // space
            console.info("I am in keyboard controls");
            $("#playpausebtn").click();
            break;
        }
        default:
            return;
    }
});
$("#fullscreenbtn").click(function () { //bind click event on fullscreen button
    console.info("I am in fullscreen")
    fullscreenFun();
});

I thought there was something weird about you using stopPropagation at the event triggering multiple times.

It's worth noting here that this will only trigger when the video_container_div or an element inside it is focused. "keydown" and "keypress" require focus to trigger without using JavaScript (you can call .trigger("keydown") if you want for example). If somebody is focused on another element on the page or has just opened the page (with nothing focused) that "keydown" event will not trigger.

---

When you click the fullscreen button that then puts the fullscreen button in focus, so when you hit the spacebar it triggers on both the keypress event you made and counts as a click because many browsers consider a space or enter keypress to be a click when something is in focus.

Try adding

$("#video_container_div").focus();

To the end of your

$("#fullscreenbtn").click(function () { 

Event to remove focus from the fullscreenbtn element and see if it still triggers twice.

EDIT: Looked at the exact code on your site and I added this and it worked for me

$(h + t.$fulScrnBtn).click(function () { //bind click event on fullscreen button
    fullscreenFun();
    $(h + t.$plyBtn).focus();
});

The reason this is working isn't ultimately what you want however. All that does it put the play/pause button in focus so when someone presses the space bar the browser counts that as a click on the button, not because somebody pressed space while focused on the video.