jquery sull'evento trigger keypress due volte

Question

Sto lavorando a un lettore video e voglio controllare alcune azioni video di base come riproduzione, pausa, ricerca tramite tastiera. Quindi, ecco il codice che sto usando per ottenere gli eventi della tastiera.

$("#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(); 
}); 

Ora il problema che sto affrontando è se l'utente clicca sul pulsante fullscreen e premere la barra spaziatrice, l'evento ha sparato twicely. http://202.164.44.244/products/trunk/video_player/sample1.htm Prima riproduce/mette in pausa il video, quindi avvia automaticamente lo schermo intero o qualsiasi ultimo evento focalizzato.

Se ho premuto il pulsante fullscreen e poi barra spaziatrice quindi Console visualizza questo:

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

In un'altra pila domanda qualcuno ha dato questa risposta di problema simile

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

Ecco il link del giocatore:

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

Ma ho bisogno di una soluzione concreta. Il problema ha già preso tutto il mio giorno.

Answer 1

Modifica finale: Ci scusiamo un po ', è mezzanotte e sono un po' stanco.

Stai utilizzando l'evento sbagliato! Ignorare ciò che ho detto sulla messa a fuoco e semplicemente sostituire "keypress" con "keydown" e dovrebbe funzionare correttamente. La messa a fuoco rimarrà sullo schermo intero, ma il tuo evento funzionerà correttamente e e.stopPropagation() sarà sufficiente per evitare che l'evento venga attivato più volte. Il codice dovrebbe leggere:

$("#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(); 
}); 

ho pensato che ci fosse qualcosa di strano su di te usando stopPropagation all'evento scatenante più volte.

Vale la pena notare che questo si innesca solo quando il video_container_div o un elemento al suo interno è a fuoco. "keydown" e "keypress" richiedono la messa a fuoco per attivare senza utilizzare JavaScript (è possibile chiamare .trigger("keydown") se si desidera ad esempio). Se qualcuno si concentra su un altro elemento della pagina o ha appena aperto la pagina (senza focalizzare nulla) l'evento "keydown" non verrà attivato.

---

Quando si fa clic sul pulsante a schermo intero che poi mette il pulsante a schermo intero a fuoco, in modo che quando si colpisce la barra spaziatrice si innesca su entrambi KeyPress hai fatto e conta come un clic, perché molti browser considerano uno spazio o immettere tasto premuto per essere un clic quando qualcosa è a fuoco.

Prova ad aggiungere

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

Alla fine della vostra

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

evento per rimuovere attenzione dall'elemento fullscreenbtn e vedere se si innesca ancora due volte.

EDIT: Guardò il codice esatto sul vostro sito e ho aggiunte questo e ha funzionato per me

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

La ragione per questo sta lavorando non è in ultima analisi, ciò che si vuole comunque. Tutto ciò mette a fuoco il pulsante play/pause in modo che quando qualcuno preme la barra spaziatrice, il browser conta come un clic sul pulsante, non perché qualcuno abbia premuto spazio mentre si concentrava sul video.