Tutorial untuk menghalang acara klik elemen kanak -kanak daripada mencetuskan keadaan pengaktifan elemen induk dalam jQuery

Artikel ini bertujuan untuk menyelesaikan masalah umum konflik acara elemen ibu bapa dan kanak-kanak dalam reka bentuk UI web. Apabila bekas induk (seperti kad) diklik, gaya pengaktifan akan ditambah, tetapi unsur -unsur kanak -kanak dalamannya (seperti butang) tidak boleh mencetuskan keadaan pengaktifan bekas induk. Kami akan memperkenalkan mekanisme menggelegak peristiwa dan menggunakan kaedah `event.stoppropagation ()` jQuery untuk menyediakan penyelesaian yang mudah dan cekap untuk memastikan kawalan yang tepat terhadap pengalaman pengguna.

Dalam aplikasi web moden, kita sering menemui bekas induk yang mengandungi elemen kanak -kanak interaktif. Satu senario biasa ialah satu set kad pilihan perkhidmatan (kad pilihan perkhidmatan) dipaparkan pada halaman. Apabila pengguna mengklik pada kad, kad akan ditandakan sebagai "aktif". Gaya visualnya biasanya berubah dengan menambahkan kelas CSS aktif. Walau bagaimanapun, kad ini mungkin mengandungi butang "Lihat Butiran" atau "Ketahui Lebih Lanjut" (Perkhidmatan-Option-BTN) di dalam, yang digunakan untuk membuka modal atau menavigasi ke halaman baru. Pada ketika ini, apabila pengguna mengklik butang ini, kami tidak mahu kad induk juga diaktifkan.

Memahami mekanisme menggelegak peristiwa

Untuk menyelesaikan masalah ini, anda perlu memahami mekanisme peristiwa yang menggelegak (peristiwa menggelegak) dalam penyemak imbas. Apabila peristiwa pada elemen DOM dicetuskan (contohnya, mengklik butang), acara itu akan dilaksanakan pada elemen sasaran, dan kemudian "gelembung" ke atas pokok DOM, mencetuskan elemen induknya, elemen datuk nenek, dan sehingga objek dokumen. Ini bermakna jika anda mengklik butang di dalam kad, acara klik bukan sahaja akan mencetuskan pengendali klik pada butang itu sendiri, tetapi juga akan terus gelembung dan mencetuskan pengendali klik pada kad. Inilah sebabnya kad juga tidak sengaja diaktifkan semasa mengklik butang.

Penyelesaian: Hentikan acara menggelegak

Kunci untuk menyelesaikan masalah ini adalah untuk mencegah peristiwa dari menggelegak dari unsur -unsur kanak -kanak ke elemen ibu bapa. Dalam jQuery, kita boleh menggunakan kaedah Event.StoppRopagation () untuk mencapai matlamat ini. Apabila event.stoppropagation () dipanggil dalam pengendali acara elemen kanak -kanak, acara itu akan berhenti menggelegak ke atas dan dengan itu tidak akan mencetuskan jenis pengendali acara yang sama elemen induknya.

Contoh kod dan pelaksanaan

Kami menunjukkan bagaimana ini dicapai melalui contoh konkrit. Anggapkan kita mempunyai struktur HTML berikut, gaya CSS, dan pengendalian acara jQuery awal.

Struktur HTML

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>

<div class="service-option-container">
  <div class="Service-Option-Card"> Kandungan kad masuk di sini <br> <a class="Service-Option-BTN"> Button </a> </div>
  <div class="Service-Option-Card"> Kandungan kad masuk di sini <br> <a class="Service-Option-BTN"> Button </a> </div>
  <div class="Service-Option-Card"> Kandungan kad masuk di sini <br> <a class="Service-Option-BTN"> Button </a> </div>
  <div class="Service-Option-Card"> Kandungan kad masuk di sini <br> <a class="Service-Option-BTN"> Button </a> </div>
  <div class="Service-Option-Card"> Kandungan kad masuk di sini <br> <a class="Service-Option-BTN"> Button </a> </div>
  <div class="Service-Option-Card"> Kandungan kad masuk di sini <br> <a class="Service-Option-BTN"> Button </a> </div>
  <div class="Service-Option-Card"> Kandungan kad masuk di sini <br> <a class="Service-Option-BTN"> Button </a> </div>
</div>

Gaya CSS

CSS berikut mentakrifkan susun atur kad, sempadan, dan warna latar dalam keadaan aktif.

 .Service-Option-Container {
  Margin: 1em 0 4EM 0;
  paparan: grid;
  Grid-template-lajur: Ulang (3, 1FR);
  Lajur-jurang: 1EM;
  ROW-GAP: 1EM;
}

.Service-Option-Container .Service-Option-Card {
  Sempadan: 1px pepejal hitam;
  Radius sempadan: 20px;
  Padding: 1em;
  margin-kiri: 1EM;
  margin-kanan: 1EM;
}

.Service-Option-Container .Service-Option-Card .Service-Option-BTN {
  Margin: 1em 0;
}

.Service-Option-Container .Service-Option-Card .extra-Pad-Bottom {
  Padding-Bottom: 2EM;
}

.Service-Option-Container .Service-Option-Card .option-Price {
  Font-Weight: Bold;
}

.Service-Option-Container .Service-Option-Card: Hover {
  kursor: penunjuk;
}

.Service-Option-Container .Service-Option-Card.Active {
  latar belakang warna: #efeeee; /*Warna latar belakang status pengaktifan*/
}

Pengendalian Acara JQuery

Pertama, kami mengikat acara klik ke kad, tambahkan kelas aktif apabila diklik, dan keluarkan kelas aktif kad saudara lain.

 $ (". Perkhidmatan-pilihan-kad"). Klik (fungsi () {
  $ (ini) .addclass ("aktif"). Saudara -saudara ('aktif'). penyingkiran ('aktif');
});

Untuk mengelakkan kad daripada diaktifkan apabila butang dalaman diklik, kita perlu menambah Event.StoppRopagation () ke acara klik butang:

 $ (". Service-Option-BTN"). Klik (fungsi (e) {
  e.Stoppropagation (); // Mencegah peristiwa menggelegak // Di sini anda boleh menambah logik lain yang perlu dilaksanakan apabila butang diklik, seperti membuka kotak modal // console.log ("Butang diklik, kad tidak diaktifkan.");
});

Menggabungkan dua keping kod jQuery, bahagian JavaScript lengkap adalah seperti berikut:

 $ (dokumen) .ready (fungsi () {
  // Acara Klik Kad: Tambah Kelas Pengaktifan $ (". Perkhidmatan-Kad Option"). Klik (fungsi () {
    $ (ini) .addclass ("aktif"). Saudara -saudara ('aktif'). penyingkiran ('aktif');
  });

  // Acara Klik Button: Mencegah Bubbling $ (". Service-Option-BTN"). Klik (fungsi (e) {
    e.Stoppropagation (); // Mencegah peristiwa klik dari menggelegak sehingga kad induk // melaksanakan logik khusus butang di sini, seperti memaparkan amaran tetingkap modal ("Butang diklik, kad tidak akan diaktifkan!");
  });
});

Melalui E.Stoppropagation (), apabila pengguna mengklik pada .Service-Option-BTN, acara klik tidak akan terus diserahkan kepada elemen induknya. Service-Option-Card, jadi pengendali klik.

Nota dan ringkasan

• Skop Event.StoppRopagation (): Ia hanya akan menghalang peristiwa daripada menggelegak ke elemen induk, tetapi tidak akan menghalang pengendali acara lain jenis yang sama pada elemen semasa daripada melaksanakan, dan tidak akan menghalang fasa penangkapan peristiwa (jika ada) daripada diproses.
• Event.StOpimMediatePropagation (): Jika anda perlu menghalang peristiwa dari menggelegak, dan juga ingin menghalang pengendali acara lain jenis yang sama pada elemen semasa (jika terdapat beberapa terikat pada elemen yang sama), anda boleh menggunakan event.stopimmediatePropagation ().
• Alternatif: Periksa Event.Target: Dalam beberapa kes, anda juga boleh menyemak sama ada Event.Target (elemen diklik sebenar) adalah elemen kanak -kanak dalam pengendali klik elemen induk, dan kemudian memutuskan sama ada untuk melaksanakan logik elemen induk berdasarkan keadaan. Tetapi untuk senario seperti ini di mana menggelegak secara eksplisit perlu dihentikan, stoppropagation () biasanya lebih langsung dan ringkas.
• Pengalaman Pengguna: Kawalan yang tepat terhadap tingkah laku acara adalah penting untuk memberikan pengalaman pengguna yang baik. Mengelakkan perubahan keadaan UI yang tidak dijangka dapat mengurangkan kekeliruan pengguna.

Melalui tutorial dalam artikel ini, anda harus dapat memahami mekanisme yang menggelegak peristiwa dan menguasai cara menggunakan event.stoppropagation () untuk menyelesaikan masalah konflik peristiwa antara elemen ibu bapa dan kanak -kanak dalam jQuery, dengan itu mencapai lebih banyak kawalan interaksi UI yang ditapis.

Atas ialah kandungan terperinci Tutorial untuk menghalang acara klik elemen kanak -kanak daripada mencetuskan keadaan pengaktifan elemen induk dalam jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!