Bagaimanakah Saya Boleh Mencegah Penyebaran Acara dalam HTML Menggunakan Atribut Inline onclick?-tutorial js-php.cn

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

DDD

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

asal

384 orang telah melayarinya

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

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>

Salin selepas log masuk

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>

Salin selepas log masuk

Menggunakan window.event.cancelBubble (Internet Explorer)

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

Salin selepas log masuk

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!

sumber：php.cn

Artikel sebelumnya：Bagaimanakah Saya Boleh Menggabungkan Dua Tatasusunan Objek Berdasarkan Kunci Dikongsi Tanpa Lelaran Kunci Eksplisit? Artikel seterusnya：Bagaimanakah Saya Boleh Mengenalpasti Fungsi Panggilan dalam JavaScript?

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang