Bagaimana untuk Mencegah Penyebaran Acara dalam JavaScript menggunakan Inline onclick?

Mencegah Penyebaran Acara dengan Atribut Klik Dalam Talian

Penyebaran acara merujuk kepada kesan melata peristiwa melalui pepohon DOM. Apabila sesuatu peristiwa berlaku pada unsur dalam, ia biasanya menggelembung sehingga unsur induknya. Dalam senario tertentu, adalah wajar untuk menghentikan penyebaran ini untuk mengelakkan tingkah laku yang tidak diingini.

Pertimbangkan kod HTML berikut:

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

Apabila pengguna mengklik mana-mana sahaja dalam elemen, kedua-dua pengendali klik span dan div akan menyala. Walau bagaimanapun, kami mungkin mahu menghalang acara klik div daripada dicetuskan apabila pengguna berinteraksi dengan elemen anaknya.

Untuk mencapai ini, kami boleh menggunakan kaedah event.stopPropagation(). Fungsi ini secara berkesan menghentikan acara daripada menggelegak kepada elemen induknya. Berikut ialah kod yang diubah suai:

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

Sekarang, apabila pengguna mengklik pada elemen, hanya acara kliknya sendiri akan dicetuskan. Acara klik div tidak akan dicetuskan lagi.

Keserasian IE

Perhatikan bahawa versi lama Internet Explorer (IE) tidak menyokong event.stopPropagation(). Sebaliknya, kita perlu menggunakan window.event.cancelBubble = true:

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

Atas ialah kandungan terperinci Bagaimana untuk Mencegah Penyebaran Acara dalam JavaScript menggunakan Inline onclick?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!