Eventhandler auf document-Ebene

[Linuchs]

Moin,

ich möchte mich mit einem vergleichbaren Problem anschließen.

Den Ablauf von Audio- und Video-Dateien möchte ich mit der Leertaste anhalten und wieder freigeben. Unabhängig davon, welches Element der Seite den Focus hat:

// Leertaste = toggle
var paused  = true;
function startStop( evt ) {
  if ( evt.keyCode == 32 ) {
    evt.stopPropagation();
    if ( paused ) {
      for ( let i=0; i < arr_ausgewaehlte_videos.length; i++ ) {
        arr_ausgewaehlte_videos[i].play();
      }
      for ( let i=0; i < arr_ausgewaehlte_audios.length; i++ ) {
        arr_ausgewaehlte_audios[i].play();
      }
      paused  = false;

    } else {

      for ( let i=0; i < arr_ausgewaehlte_videos.length; i++ ) {
        arr_ausgewaehlte_videos[i].pause();
      }
      for ( let i=0; i < arr_ausgewaehlte_audios.length; i++ ) {
        arr_ausgewaehlte_audios[i].pause();
      }
      paused  = true;
    }
  }
}

window.addEventListener('DOMContentLoaded', function () {
  // Leertaste bedeutet start/stop
//document.removeEventListener("keydown", tutNichts );
  document.addEventListener("keydown", startStop );
});

Wenn ich die Leertaste (32) erkenne, setze ich SOFORT stopPropagation. Nachdem die Audio-Dateien per Javascript mit [alle play] gestartet wurden (wo liegt dann der Focus?) werden sie bei Leertaste kurz angehalten, laufen aber sofort wieder weiter. Warum ist stopPropagation hier wirkungslos?

Wenn der Textteil im Focus liegt (irgendwo in den Textteil geklickt), stoppt die Musik bei Leertaste tatsächlich, aber gleichzeitig springt die Seite ein Bild nach oben wie auf anderen Webseiten auch. Wieso?

Linuchs