Wie verhindert man die Ereignisweitergabe von untergeordneten zu übergeordneten Elementen in HTML?

Verhindern der Ereignisweitergabe mit dem Inline-Onclick-Ereignis-Listener

In HTML ermöglichen uns Inline-Ereignis-Listener, die Ereignisbehandlung direkt im Tag des Elements hinzuzufügen. Manchmal stoßen wir jedoch auf Situationen, in denen das Ereignis eines untergeordneten Elements nicht das Ereignis des übergeordneten Elements auslösen sollte.

Problem:

Bedenken Sie den folgenden Code:

<div onclick="alert('you clicked the header')" class="header">
  <span onclick="alert('you clicked inside the header');">something inside the header</span>
</div>

Wenn der Benutzer in diesem Snippet auf den Span klickt, werden sowohl das Klickereignis des Spans als auch das Klickereignis des Divs angezeigt ausgelöst.

Lösung:

Um die Ereignisweitergabe vom Span zum Div zu stoppen, können wir die Methode event.stopPropagation() verwenden:

<span onclick="event.stopPropagation(); alert('you clicked inside the header');">something inside the header</span>

Durch den Aufruf von event.stopPropagation() verhindern wir, dass das Ereignis zum übergeordneten Element aufsteigt, wodurch das Klickereignis effektiv vom Element isoliert wird span.

Alternative für IE:

Für ältere Versionen von Internet Explorer, die event.stopPropagation() nicht unterstützen, können wir window.event.cancelBubble verwenden = true:

<span onclick="window.event.cancelBubble = true; alert('you clicked inside the header');">something inside the header</span>

Diese Methode erzielt das gleiche Ergebnis, indem sie die Ausbreitung des Ereignisses explizit abbricht.

Das obige ist der detaillierte Inhalt vonWie verhindert man die Ereignisweitergabe von untergeordneten zu übergeordneten Elementen in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!