Bagaimanakah Saya Boleh Mencegah Penyebaran Peristiwa dalam Elemen Bersarang dengan Pengendali onclick Sebaris?

Mencegah Penyebaran Peristiwa dengan Atribut Inline Onclick

Apabila berbilang elemen bersarang antara satu sama lain dan mempunyai pengendali acara onclick sendiri, ia mungkin untuk peristiwa untuk menyebarkan hierarki DOM, mencetuskan pengendali pada elemen induk. Walaupun tingkah laku ini boleh diingini dalam sesetengah kes, ia mungkin perlu untuk menghalang penyebaran ini dalam yang lain.

Contoh:

Pertimbangkan coretan 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>

Apabila pengguna mengklik pada span, ia mencetuskan kedua-dua pengendali acara onclick span dan pengendali acara onclick div. Untuk mengelakkan penyebaran acara ke div, kita boleh menggunakan salah satu kaedah berikut:

1. event.stopPropagation()

Kaedah ini menghentikan acara daripada merambat lebih jauh ke atas pokok DOM.

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

2. window.event.cancelBubble (untuk IE)

Untuk Internet Explorer, kaedah yang setara ialah window.event.cancelBubble.

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

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencegah Penyebaran Peristiwa dalam Elemen Bersarang dengan Pengendali onclick Sebaris?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!