Bagaimanakah Saya Boleh Mencegah Penyebaran Acara dalam HTML Menggunakan Atribut Inline onclick?

Mencegah Penyebaran Peristiwa dengan Atribut Inline Onclick

Apabila mengendalikan acara dalam HTML, selalunya perlu mengawal cara peristiwa disebarkan melalui DOM. Ini benar terutamanya apabila mengurus elemen bersarang yang mungkin berkongsi pendengar acara.

Pertimbangkan contoh berikut:

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

Dalam kes ini, kedua-dua

(header) dan elemen mempunyai atribut onclick sebaris yang memaparkan amaran apabila diklik. Secara lalai, mengklik pada elemen akan mencetuskan kedua-dua dan

peristiwa, yang mungkin bukan tingkah laku yang diingini.

Untuk mengelakkan penyebaran peristiwa dan hanya mencetuskan acara, kita perlu menghentikan acara daripada menggelegak kepada elemen induk. Ini boleh dicapai menggunakan teknik berikut:

Menggunakan event.stopPropagation() (pelayar moden)

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

Menggunakan window.event.cancelBubble (Internet Explorer)

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

Dengan menambahkan baris ini pada atribut onclick bagi elemen, kami menghalang acara daripada disebarkan kepada induk

elemen, membolehkan kami mengendalikan acara klik secara bebas untuk setiap elemen.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencegah Penyebaran Acara dalam HTML Menggunakan Atribut Inline onclick?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!