Mengapakah peristiwa gagal timbul?

Mengapa acara tidak boleh muncul dalam beberapa kes?

Event menggelegak bermakna apabila peristiwa pada elemen dicetuskan, peristiwa itu akan dihantar ke atas bermula dari elemen paling dalam sehingga ia dihantar ke elemen paling luar. Tetapi dalam beberapa kes, acara tidak boleh menggelembung, iaitu, acara hanya akan diproses pada elemen yang dicetuskan dan tidak akan dihantar kepada elemen lain. Artikel ini akan memperkenalkan beberapa situasi biasa, membincangkan sebab peristiwa gagal menggelegak dan memberikan contoh kod khusus.

1. Gunakan corak tangkapan acara:
   Tangkapan acara ialah satu lagi cara penyampaian acara, berbanding acara menggelegak. Dalam mod tangkapan, peristiwa dihantar bermula dari elemen paling luar dan berfungsi ke dalam sehingga ia dihantar ke elemen paling dalam. Jika acara dikendalikan semasa tangkapan acara, acara tidak akan dibuih lagi. Anda boleh menentukan sama ada peristiwa diproses dalam fasa tangkapan atau fasa menggelegak melalui parameter ketiga kaedah addEventListener lalai adalah palsu (fasa menggelegak). Berikut ialah contoh kod menggunakan corak tangkapan acara:

document.addEventListener('click', function(event) {
  console.log('捕获阶段');
}, true);

document.addEventListener('click', function(event) {
  console.log('冒泡阶段');
}, false);

Dalam kod di atas, apabila mana-mana bahagian halaman diklik, acara akan diproses dalam kedua-dua fasa tangkapan dan fasa menggelegak. Jika parameter ketiga ditetapkan kepada benar, acara hanya akan diproses dalam fasa tangkapan dan tidak akan dibuih, menyebabkan acara itu gagal untuk menggelembung.

2. Gunakan kaedah stopPropagation: Kaedah
   stopPropagation digunakan untuk menghentikan penyebaran peristiwa dan mengelakkan menggelegak dan penghantaran peristiwa selanjutnya. Apabila kaedah stopPropagation dipanggil dalam pengendali acara, acara tidak akan terus dihantar ke elemen lain. Berikut ialah contoh kod menggunakan kaedah stopPropagation:

document.getElementById('inner').addEventListener('click', function(event) {
  console.log('内层元素点击事件');
  event.stopPropagation();
});

document.getElementById('outer').addEventListener('click', function(event) {
  console.log('外层元素点击事件');
});

Dalam kod di atas, apabila elemen dalam diklik, acara dikendalikan pada elemen tetapi tidak dihantar ke elemen luar, menyebabkan acara gagal untuk menggelembung .

3. Gunakan acara klik butang kanan tetikus:
   Dalam sesetengah penyemak imbas, acara klik butang kanan tetikus (menu konteks) tidak muncul. Ini direka untuk memudahkan pembangun menambah fungsi tersuai pada menu klik kanan. Berikut ialah contoh kod di mana peristiwa klik kanan tetikus tidak boleh menggelembung:

document.addEventListener('contextmenu', function(event) {
  console.log('右键点击事件');
});

document.addEventListener('click', function(event) {
  console.log('点击事件');
});

Dalam kod di atas, apabila halaman diklik kanan, hanya peristiwa klik kanan akan dicetuskan dan acara klik tidak akan dicetuskan.

Ringkasan:
Situasi di mana peristiwa tidak boleh menggelembung termasuk menggunakan mod tangkapan acara, memanggil stopPropagation method dan acara klik kanan tetikus. Memahami situasi ini boleh membantu kami memahami dengan lebih baik mekanisme penyampaian acara semasa pembangunan dan mengelakkan masalah yang tidak dijangka. Saya harap kandungan di atas dapat memberi inspirasi kepada pembaca!

Atas ialah kandungan terperinci Mengapakah peristiwa gagal timbul?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!