Rumah >hujung hadapan web >tutorial js >Bagaimanakah Saya Boleh Mencegah Penyebaran Acara dalam HTML Menggunakan Atribut Inline onclick?

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

DDDasal: 2024-12-08 22:13:17337semak imbas

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>

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!

html for using Attribute Event default dom this alert display

Kenyataan：

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 sebelumnya：Bagaimanakah Saya Boleh Menggabungkan Dua Tatasusunan Objek Berdasarkan Kunci Dikongsi Tanpa Lelaran Kunci Eksplisit?Artikel seterusnya：Bagaimanakah Saya Boleh Menggabungkan Dua Tatasusunan Objek Berdasarkan Kunci Dikongsi Tanpa Lelaran Kunci Eksplisit?

Artikel berkaitan

Lihat lagi