Bagaimana untuk Mencegah Penyebaran Acara daripada Elemen Anak kepada Induk dalam HTML?

Mencegah Penyebaran Peristiwa dengan Inline Onclick Event Listener

Dalam HTML, pendengar acara sebaris membenarkan kami menambah pengendalian acara secara langsung dalam teg elemen. Walau bagaimanapun, kadangkala kita menghadapi situasi di mana peristiwa unsur anak tidak seharusnya mencetuskan peristiwa unsur induk.

Masalah:

Pertimbangkan kod 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 coretan ini, apabila pengguna mengklik span, kedua-dua peristiwa klik span dan klik div acara dicetuskan.

Penyelesaian:

Untuk menghentikan penyebaran acara dari span ke div, kita boleh menggunakan kaedah event.stopPropagation():

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

Dengan memanggil event.stopPropagation(), kami menghalang acara daripada menggelegak ke elemen induk, dengan berkesan mengasingkan acara klik pada rentang.

Alternatif untuk IE:

Untuk versi Internet Explorer yang lebih lama, yang tidak menyokong event.stopPropagation(), kita boleh gunakan window.event.cancelBubble = benar:

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

Kaedah ini mencapai hasil yang sama dengan membatalkan secara eksplisit penyebaran acara.

Atas ialah kandungan terperinci Bagaimana untuk Mencegah Penyebaran Acara daripada Elemen Anak kepada Induk dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!