jquery na dwukrotne naciśnięcie spustu zdarzenia

Question

Pracuję nad odtwarzaczem wideo i chcę sterować niektórymi podstawowymi działaniami wideo, takimi jak odtwarzanie, pauza, wyszukiwanie za pomocą klawiatury. Oto kod, którego używam do uzyskiwania zdarzeń na klawiaturze.

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

Teraz problemem jest, jeśli użytkownik kliknie przycisk pełnoekranowy, a następnie naciśnij klawisz spacji, zdarzenie uruchomi się podwójnie. http://202.164.44.244/products/trunk/video_player/sample1.htm Najpierw odtwarza/wstrzymuje wideo, a następnie automatycznie uruchamia pełny ekran lub dowolne ostatnie zdarzenie.

Gdybym wciśnięty pełnoekranowego przycisk, a następnie spację następnie Konsola wyświetli to:

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

W innym stos zapytania ktoś dał taką odpowiedź o podobnym problemie

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

Oto link odtwarzacza:

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

Ale potrzebuję konkretnego rozwiązania tego problemu. Problem już trwał cały dzień.

Answer 1

Końcowa edycja: Przeprosiny zajęły trochę, jest północ i jestem trochę zmęczona.

Używasz niewłaściwego wydarzenia! Zignoruj ​​to, co powiedziałem o fokusie i po prostu zamień "keypress" na "keydown" i powinno działać poprawnie. Fokus pozostanie na fullscreenbtn, ale twoje wydarzenie będzie działać poprawnie i wystarczy e.stopPropagation(), aby zapobiec wielokrotnemu wystrzeliwaniu zdarzenia. Kod powinien brzmieć:

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

Myślałem, że coś dziwnego używasz stopPropagation w przypadku wyzwalania wielokrotnie.

Warto zauważyć, że spowoduje to tylko, gdy zostanie skupiony video_container_div lub element w środku. "keydown" i "keypress" wymagają aktywacji bez użycia JavaScriptu (możesz zadzwonić pod numer .trigger("keydown"), jeśli chcesz na przykład). Jeśli ktoś jest skupiony na innym elemencie na stronie lub właśnie otworzył stronę (bez skupienia się na niczym), to zdarzenie "keydown" nie uruchomi się.

---

Po kliknięciu przycisku pełnego ekranu, który następnie umieszcza przycisk pełnoekranowego w centrum uwagi, więc po trafieniu spacji wyzwala zarówno w przypadku naciśnięcia klawisza dokonane i liczy się jako kliknięcie ponieważ wiele przeglądarek rozważyć spacji lub wprowadź naciśnięcie klawisza oznacza kliknięcie, gdy coś jest ostry.

spróbuj dodać

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

Do końca swojej

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

Event usunąć ostrość od elementu fullscreenbtn i zobacz czy nadal wyzwala dwukrotnie.

EDIT: Patrząc na dokładnym kod na swojej stronie i dodałem to i pracował dla mnie

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

Powodem jest to praca nie jest ostatecznie to, co chcesz jednak. Wszystko to powoduje, że naciskany jest przycisk play/pause, więc gdy ktoś naciśnie klawisz spacji, przeglądarka liczy, że to kliknięcie przycisku, a nie dlatego, że ktoś nacisnął spację i skupił się na wideo.