Wie kann ich die Ereignisweitergabe in HTML mithilfe von Inline-OnClick-Attributen verhindern?-js-Tutorial-php.cn

Wie kann ich die Ereignisweitergabe in HTML mithilfe von Inline-OnClick-Attributen verhindern?

DDD

Freigeben： 2024-12-08 22:13:17

Original

325 Leute haben es durchsucht

How Can I Prevent Event Propagation in HTML Using Inline onclick Attributes?

Verhindern der Ereignisweitergabe mit Inline-Onclick-Attributen

Beim Umgang mit Ereignissen in HTML ist es oft notwendig, zu steuern, wie sich Ereignisse durch das DOM verbreiten. Dies gilt insbesondere bei der Verwaltung verschachtelter Elemente, die möglicherweise gemeinsame Ereignis-Listener haben.

Betrachten Sie das folgende Beispiel:

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

Nach dem Login kopieren

In diesem Fall sind sowohl

(Kopfzeile) und Elemente verfügen über integrierte Onclick-Attribute, die beim Klicken eine Warnung anzeigen. Standardmäßig wird durch Klicken auf die Schaltfläche -Element löst sowohl das und

Ereignisse, die möglicherweise nicht das gewünschte Verhalten sind.

Um die Ausbreitung von Ereignissen zu verhindern und nur das Bei einem Ereignis müssen wir verhindern, dass das Ereignis zum übergeordneten Element übergeht. Dies kann mit den folgenden Techniken erreicht werden:

Verwendung von event.stopPropagation() (moderne Browser)

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

Nach dem Login kopieren

Verwendung von window.event.cancelBubble (Internet Explorer)

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

Nach dem Login kopieren

Durch Hinzufügen dieser Zeilen zum onclick-Attribut des Element verhindern wir, dass das Ereignis an das übergeordnete

-Element weitergegeben wird. Element, sodass wir das Klickereignis für jedes Element unabhängig behandeln können.

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

Quelle：php.cn

Vorheriger Artikel：Wie kann ich zwei Arrays von Objekten basierend auf einem gemeinsamen Schlüssel ohne explizite Schlüsseliteration zusammenführen? Nächster Artikel：Wie kann ich die aufrufende Funktion in JavaScript identifizieren?

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors