Jquery in a trigger event of a keystroke twice

Question

I am working on a video player, and I want to control some basic video actions, such as play, pause, search from the keyboard. So, here is the code that I use to receive 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 problem is that if the user clicks on the full-screen button and then presses the spacebar, the event fires twicely. http://202.164.44.244/products/trunk/video_player/sample1.htm First, it plays / pauses the video, and then automatically triggers full-screen mode or any last focused event.

If I pressed the full-screen button and then the space bar, the console will display this:

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

In another stack question someone gave this answer to a similar problem

stack overflow

Here is the player link:

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

But I need a concrete solution to this. The question has already taken all day.

Answer 1

Final Edit: Sorry it took a bit, midnight, and I'm a little tired.

You are using the wrong event! Ignore what I said about the focus and just replace "keypress" with "keydown" and it should work fine. The focus will remain on fullscreenbtn, but your event will work correctly, and e.stopPropagation() will be enough to prevent the event from firing repeatedly. 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 that there was something strange in you, using stopPropagation when triggering an event several times.

It is worth noting here that this will only work when the video_container_div object or the element within it is focused. "keydown" and "keypress" require focus to run without using JavaScript (you can call .trigger("keydown") if you want, for example). If someone is focused on another element on the page or has just opened the page (nothing focused), the "keydown" event will not be "keydown" .

---

When you press the full-screen button, which then focuses in full-screen mode, so when you press the spacebar, it fires like the keypress event that you did and counts as a click, because many browsers consider a space or enter a keystroke click when something is in focus.

Try to add

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

At the end of your

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

Event to remove focus from the fullscreenbtn element and see if it continues to fire twice.

EDIT: I looked at the exact code on your site, and I added it, and it worked for me.

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

The reason this works is ultimately not what you want. Everything that does this puts the play / pause button in focus, so when someone presses the spacebar, the browser counts it like a click on the button, and not because someone clicked on a spot, focusing on the video.