Wie verhindert Javascript die Ausbreitung von Ereignissen?

In JavaScript können Sie die Methoden des Ereignisobjekts verwenden, um die Ereignisweitergabe zu verhindern. Ereignisweitergabe bedeutet, dass, wenn ein Ereignis für ein Element ausgelöst wird, das Ereignis an übergeordnete Elemente oder Vorfahrenelemente im Ereignisstrom weitergegeben wird und sich dadurch auf diese auswirkt.

Es gibt drei Stufen der Ereignisausbreitung: Erfassungsstufe, Zielstufe und Blasenstufe. Die Methode zur Verhinderung der Ausbreitung eines Ereignisses hängt von der Phase ab, in der Sie die Ausbreitung stoppen möchten.

Hier sind gängige Methoden, um die Ausbreitung eines Vorfalls zu stoppen:

1. event.stopPropagation(): Der Aufruf dieser Methode kann verhindern, dass sich das Ereignis weiter auf dem aktuellen Element ausbreitet, sei es in der Erfassungsphase oder der Bubbling-Phase. Wenn das Ereignis während der Erfassungsphase ausgelöst wird, verhindert der Aufruf dieser Methode, dass es in die Bubbling-Phase eintritt, und hat somit keine Auswirkungen auf das übergeordnete Element und seine Vorfahren. Wenn das Ereignis während der Bubbling-Phase ausgelöst wird, stoppt der Aufruf dieser Methode die Bubbling-Phase sofort und wird nicht an das übergeordnete Element und seine Vorgängerelemente weitergegeben. Wenn mehrere Ereignishandler für dasselbe Element vorhanden sind, verhindert der Aufruf dieser Methode nur die Ausbreitung des Ereignisses, hat jedoch keinen Einfluss auf die Ausführung anderer Handler.
Beispiel:

element.addEventListener('click', function(event) {
    
    
  event.stopPropagation();
  // 其他事件处理代码
});

2. event.stopImmediatePropagation(): Ähnlich wie event.stopPropagation(), aber leistungsfähiger. Der Aufruf dieser Methode stoppt nicht nur die Ausbreitung von Ereignissen auf dem aktuellen Element, sondern verhindert auch, dass andere Ereignisse desselben Typs weiterhin ausgelöst werden. Selbst wenn mehrere Ereignishandler für dasselbe Element vorhanden sind, werden die anderen Handler nicht ausgeführt, solange einer von ihnen diese Methode aufruft. Diese Methode ist nützlich, wenn mehrere Ereignishandler an dasselbe Element gebunden sind und Sie verhindern möchten, dass die anderen Handler ausgeführt werden, nachdem der erste Handler ausgeführt wurde. Beispiel:

element.addEventListener('click', function(event) {
    
    
  event.stopImmediatePropagation();
  // 其他事件处理代码
});

Es ist wichtig zu beachten, dass das Blockieren der Ereignisweitergabe zwar einige Probleme lösen kann, ein Missbrauch jedoch zu unvorhersehbarem Verhalten bei der Ereignisbehandlung führen kann. Überlegen Sie bei der Verwendung sorgfältig, ob Sie die Ausbreitung von Ereignissen aufgrund tatsächlicher Anforderungen verhindern müssen.