Wie verhindert man die Ereignisweitergabe in JavaScript mithilfe von Inline-OnClick?

Verhindern der Ereignisweitergabe mit Inline-Onclick-Attribut

Ereignisweitergabe bezieht sich auf die Kaskadenwirkung von Ereignissen durch den DOM-Baum. Wenn ein Ereignis auf einem inneren Element auftritt, breitet es sich normalerweise auf die übergeordneten Elemente aus. In bestimmten Szenarien kann es wünschenswert sein, diese Ausbreitung zu stoppen, um unbeabsichtigtes Verhalten zu verhindern.

Bedenken Sie den folgenden HTML-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 ein Benutzer irgendwo innerhalb des Element werden sowohl die Klick-Handler des Spans als auch des Divs ausgelöst. Möglicherweise möchten wir jedoch verhindern, dass das Klickereignis des Div ausgelöst wird, wenn der Benutzer mit seinem untergeordneten Element interagiert.

Um dies zu erreichen, können wir die Methode event.stopPropagation() verwenden. Diese Funktion verhindert effektiv, dass das Ereignis in seine übergeordneten Elemente übergeht. Hier ist der geänderte Code:

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

Wenn der Benutzer nun auf klickt; Element wird nur sein eigenes Klickereignis ausgelöst. Das Klickereignis des Divs wird nicht mehr ausgelöst.

IE-Kompatibilität

Beachten Sie, dass ältere Versionen von Internet Explorer (IE) event.stopPropagation() nicht nativ unterstützen. Stattdessen müssen wir window.event.cancelBubble = true:

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

verwenden

Das obige ist der detaillierte Inhalt vonWie verhindert man die Ereignisweitergabe in JavaScript mithilfe von Inline-OnClick?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!