Wie kann ich die Ereignisweitergabe in verschachtelten Elementen mit Inline-Onclick-Handlern verhindern?

Verhindern der Ereignisweitergabe mit Inline-Onclick-Attributen

Wenn mehrere Elemente ineinander verschachtelt sind und über eigene Onclick-Ereignishandler verfügen, ist dies möglich Ereignisse, die sich in der DOM-Hierarchie nach oben verbreiten und Handler für übergeordnete Elemente auslösen. Während dieses Verhalten in manchen Fällen wünschenswert sein kann, kann es in anderen Fällen notwendig sein, diese Ausbreitung zu verhindern.

Beispiel:

Bedenken Sie den folgenden Codeausschnitt:

<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 auf den Span klickt, löst er sowohl den Onclick-Ereignishandler des Spans als auch das Onclick-Ereignis des Div aus Handler. Um die Weitergabe des Ereignisses an das Div zu verhindern, können wir eine der folgenden Methoden verwenden:

1. event.stopPropagation()

Diese Methode verhindert, dass sich das Ereignis weiter oben im DOM-Baum ausbreitet.

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

2. window.event.cancelBubble (für IE)

Für Internet Explorer ist die entsprechende Methode window.event.cancelBubble.

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

Das obige ist der detaillierte Inhalt vonWie kann ich die Ereignisweitergabe in verschachtelten Elementen mit Inline-Onclick-Handlern verhindern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!