Rumah > hujung hadapan web > tutorial js > Bagaimanakah Saya Boleh Mencegah Penyebaran Acara dalam JavaScript?

Bagaimanakah Saya Boleh Mencegah Penyebaran Acara dalam JavaScript?

Patricia Arquette
Lepaskan: 2024-12-06 05:53:09
asal
449 orang telah melayarinya

How Can I Prevent Event Propagation in JavaScript?

Mencegah Penyebaran Acara Menggunakan Atribut Inline Onclick

Pertimbangkan kod HTML berikut:

<div onclick="alert('you clicked the header')">
Salin selepas log masuk

Dalam senario ini, apabila pengguna mengklik elemen span, kedua-dua acara klik span dan acara klik div adalah dicetuskan. Ini dikenali sebagai penyebaran peristiwa.

Untuk mengelakkan acara klik div daripada menyala apabila pengguna mengklik rentang, teknik penyebaran acara sebaris boleh digunakan:

stop Kaedah Penyebaran:

Kaedah yang paling banyak disokong ialah menggunakan kaedah event.stopPropagation() dalam atribut onclick span. Begini cara anda melaksanakannya:

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

Dengan memanggil stopPropagation(), penyebaran peristiwa klik dihentikan pada elemen span, menghalangnya daripada mencapai div induk.

Keserasian IE:

Untuk Internet Explorer, alternatif berikut boleh digunakan:

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

Kod ini mencapai hasil yang sama seperti stopPropagation() tetapi disesuaikan secara khusus untuk pelayar IE.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencegah Penyebaran Acara dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan