Apakah cara untuk mengelakkan peristiwa daripada menggelegak?

Kaedah untuk mengelakkan peristiwa menggelegak termasuk kaedah "stopPropagation()", atribut "cancelBubble", pernyataan "return false", kaedah "stopImmediatePropagation()" dan kaedah "preventDefault()" bersama-sama dengan " kaedah stopPropagation()". Pembangun harus memilih kaedah yang sesuai berdasarkan keperluan khusus dan keserasian penyemak imbas Penggunaan kaedah pencegahan gelembung yang betul boleh meningkatkan kesan interaksi.

Sistem pengendalian tutorial ini: sistem Windows 10, komputer DELL G3.

Menghalang acara menggelegak ialah salah satu keperluan biasa dalam pembangunan web Ia boleh menghalang peristiwa daripada diserahkan kepada elemen induk dan elemen nenek moyang yang lain, dan hanya mencetuskan pengendali acara bagi elemen semasa. Dalam perkembangan sebenar, terdapat banyak cara untuk mengelakkan kejadian daripada menggelegak. Artikel ini akan memperincikan lima kaedah yang biasa digunakan untuk mengelakkan peristiwa menggelegak.

1. kaedah stopPropagation()

Kaedah stopPropagation() ialah kaedah yang paling biasa digunakan dan mudah untuk mengelakkan kejadian daripada menggelegak. Kaedah ini boleh menghalang acara daripada menggelegak dengan memanggil fungsi stopPropagation() objek acara. Contohnya adalah seperti berikut:

   elem.addEventListener('click', function(event){
      event.stopPropagation();
   });

Dalam contoh di atas, pengendali acara klik terikat pada elemen melalui fungsi addEventListener() dan kemudian kaedah stopPropagation() dipanggil dalam fungsi pengendali. Selepas memanggil kaedah ini, acara tidak lagi akan dihantar kepada elemen induk dan hanya peristiwa klik elemen semasa akan dicetuskan.

2. cancelBubble attribute

Atribut cancelBubble ialah kaedah yang disediakan oleh penyemak imbas awal IE untuk mengelakkan peristiwa menggelegak, dan masih serasi dengan kebanyakan penyemak imbas moden. Sifat ini akan ditetapkan kepada benar dalam fungsi pengendalian acara untuk mengelakkan acara daripada menggelegak. Contohnya adalah seperti berikut:

   elem.onclick = function(event){
      event.cancelBubble = true;
   };

Dalam contoh di atas, penghantaran menggelegak acara klik dihalang dengan menetapkan sifat cancelBubble kepada benar.

3. kembalikan pernyataan palsu

Dalam sesetengah kes, jika anda ingin menghalang kelakuan lalai acara dan menghalang acara daripada menggelegak pada masa yang sama, anda boleh menggunakan kaedah mengembalikan palsu. Contohnya adalah seperti berikut:

   elem.onclick = function(event){
      // 阻止事件冒泡
      event.stopPropagation();
      // 阻止事件默认行为
      return false;
   };

Dalam contoh di atas, kedua-dua acara menggelegak dan kelakuan lalai acara dihalang dengan mengembalikan palsu dalam fungsi pengendali acara. Perlu diingat bahawa return false hanya boleh digunakan apabila mengikat secara langsung fungsi pemprosesan acara dan tidak boleh digunakan untuk mengikat acara dengan fungsi addEventListener().

4. kaedah stopImmediatePropagation()

Kaedah stopImmediatePropagation() sangat serupa dengan kaedah stopPropagation() dan boleh digunakan untuk mengelakkan peristiwa daripada menggelegak, tetapi ia juga mempunyai ciri tambahan - ia boleh menghalang pengendali acara lain pada perlaksanaan yang sama. Contohnya adalah seperti berikut:

   elem.addEventListener('click', function(event){
      console.log('事件处理函数1');
      event.stopImmediatePropagation();
   });
   elem.addEventListener('click', function(event){
      console.log('事件处理函数2');
   });

Dalam contoh di atas, dengan memanggil kaedah stopImmediatePropagation(), pengendali acara 1 akan menghalang acara daripada menggelegak dan pengendali acara lain tidak akan dilaksanakan. Oleh itu, hanya "Fungsi Pengendalian Acara 1" akan dikeluarkan, tetapi "Fungsi Pengendalian Acara 2" tidak akan dikeluarkan.

5 Kaedah preventDefault() bekerjasama dengan kaedah stopPropagation()

Dalam sesetengah kes, kami bukan sahaja mahu menghalang acara daripada menggelegak, tetapi juga mahu menghalang kelakuan lalai acara (seperti melarang klik pautan. untuk melompat atau menyerahkan borang, dsb.). Pada masa ini, anda boleh menggunakan kaedah preventDefault() dan kaedah stopPropagation() dalam kombinasi. Contohnya adalah seperti berikut:

   elem.addEventListener('click', function(event){
      event.preventDefault();
      event.stopPropagation();
   });

Dalam contoh di atas, dengan memanggil kaedah preventDefault(), anda boleh menghalang kelakuan lalai acara klik, seperti lompat pautan atau penyerahan borang. Memanggil kaedah stopPropagation() pada masa yang sama boleh menghalang acara daripada menggelegak dan memastikan bahawa hanya pengendali peristiwa elemen semasa dicetuskan.

Perlu diingat bahawa walaupun kaedah di atas boleh digunakan untuk mengelakkan kejadian menggelegak, dalam penggunaan sebenar, anda harus memilih dengan teliti bila untuk menggunakannya. Penyalahgunaan yang berlebihan untuk mencegah peristiwa menggelegak boleh mengakibatkan peristiwa itu tidak diserahkan kepada elemen induk atau fungsi pemprosesan lain, menjejaskan pengalaman pengguna. Oleh itu, kaedah di atas hendaklah digunakan hanya dalam senario di mana ia benar-benar perlu untuk mengelakkan peristiwa menggelegak, dan kaedah yang berkenaan hendaklah dipilih secara munasabah mengikut keperluan.

Ringkasnya, kaedah untuk menghalang peristiwa menggelegak termasuk menggunakan kaedah stopPropagation(), cancelBubble attribute, return false statement, stopImmediatePropagation() kaedah dan preventDefault() kaedah bersama-sama dengan stopPropagation() kaedah. Setiap kaedah mempunyai senario terpakai sendiri dan pembangun harus memilih berdasarkan keperluan khusus dan keserasian penyemak imbas. Pada masa yang sama, penggunaan kaedah yang munasabah untuk mencegah peristiwa menggelegak boleh meningkatkan kesan interaksi dan pengalaman pengguna.

Atas ialah kandungan terperinci Apakah cara untuk mengelakkan peristiwa daripada menggelegak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!