jquery nyahsekat acara lalai

jQuery menyahsekat acara lalai

Dalam pembangunan bahagian hadapan, gelagat acara lalai ialah beberapa gelagat istimewa yang disertakan dengan peristiwa DOM Sebagai contoh, gelagat lalai mengklik teg akan melompat ke yang sepadan pautan. Kadangkala pelanggan memerlukan beberapa gelagat tertentu dan pada masa ini pembangun perlu menghalang gelagat lalai acara untuk mencapai keperluan pelanggan. Pada masa tertentu, gelagat lalai untuk menyekat acara perlu dikeluarkan. Artikel ini akan memperkenalkan cara jQuery menyahsekat kelakuan lalai untuk menyekat acara.

1. Gelagat lalai

Terdapat gelagat istimewa dalam pemprosesan acara, iaitu gelagat lalai. Contohnya, gelagat lalai teg adalah untuk melompat ke pautan yang sepadan, gelagat penyerahan borang adalah untuk menyerahkan borang ke pelayan hujung belakang dan gelagat lalai menu klik kanan adalah untuk memunculkan menunya sendiri, dll. Tingkah laku lalai sering disekat atau diubah suai untuk memenuhi keperluan khusus pembangun.

2. Penyekatan acara

Fungsi penyekatan acara adalah untuk menghalang kelakuan lalai acara. Acara JavaScript biasanya boleh dibatalkan, dihentikan atau disekat. Anda boleh menggunakan kaedah event.preventDefault() untuk menghalang tingkah laku lalai acara. Sila lihat contoh di bawah:

<a href="https://www.example.com" id="example">点击我跳转</a>

$('#example').click(function(event) {
  event.preventDefault();
});

Dengan cara ini, apabila kita mengklik pada hiperpautan, tingkah laku lalai akan dihalang daripada melompat ke pautan yang ditentukan.

3. Nyahsekat

Kadangkala, kami tidak mahu menyekat gelagat lalai selama-lamanya, tetapi perlu menyahsekatnya untuk mencapai fungsi tertentu. Pada masa ini, kita perlu menggunakan kaedah event.stopPropagation() dan event.stopImmediatePropagtion() untuk menyahsekat gelagat lalai acara. Kaedah

event.stopPropagation() menghalang peristiwa semasa daripada disebarkan kepada elemen induk semasa proses menggelegak. Tetapi ia tidak menjejaskan pendengar acara lain pada elemen semasa. Kaedah

event.stopImmediatePropagation() juga boleh menghalang peristiwa semasa daripada disebarkan kepada elemen induk semasa proses menggelegak. Tetapi tidak seperti event.stopPropagation(), ia juga akan menyekat pendengar acara lain pada elemen semasa.

Sila lihat contoh berikut:

<div id="parentNode">
  <p id="childNode">点击我</p>
</div>

$('#childNode').on('click', function(event) {
  event.stopImmediatePropagation();
  console.log('子元素的点击事件')
});

$('#parentNode').on('click', function(event) {
  console.log('父元素的点击事件')
});

Dalam kod di atas, kami telah mengikat acara klik pada elemen anak dan elemen induk secara berasingan, dan menggunakan kaedah event.stopImmediatePropagation() untuk menyekat pada elemen kanak-kanak Tingkah laku acara lalai. Apabila kami mengklik pada elemen kanak-kanak, hanya "acara klik elemen kanak-kanak" adalah output, dan apabila kami mengklik pada elemen induk, "acara klik elemen kanak-kanak" dan "acara klik elemen induk" adalah keluaran.

4. Ringkasan

Gelagat lalai acara ialah beberapa gelagat istimewa yang disertakan dengan acara DOM, yang boleh menghalang gelagat lalai acara. Dalam beberapa kes tertentu, kita perlu menyahsekat gelagat lalai acara untuk mencapai beberapa fungsi tertentu. jQuery menggunakan kaedah event.stopPropagation() dan event.stopImmediatePropagation() untuk melegakan gelagat lalai acara untuk memenuhi keperluan khusus.

Atas ialah kandungan terperinci jquery nyahsekat acara lalai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!