Bagaimana untuk mengelakkan peristiwa klik elemen kanak-kanak daripada mempengaruhi peristiwa klik dua kali elemen induk?

Cleverly menyelesaikan konflik antara klik elemen kanak-kanak dan elemen induk Double-click events

Apabila elemen induk mengikat peristiwa klik dua kali (DBLClick) dan elemen kanak-kanak mengikat acara klik (klik), klik cepat elemen kanak-kanak secara tidak sengaja boleh mencetuskan peristiwa klik dua kali elemen induk. Artikel ini menyediakan dua kaedah untuk mengelakkan konflik dengan berkesan.

Anggapkan struktur kod berikut:

<div>
    <div></div>
</div>

Fungsi yang sepadan:

 showPreset (event) {
    console.log ('aaaaa');
}

changeFullScreen (event) {
    console.log ('bbbb');
}

Menyekat gelembung secara langsung atau menggunakan event.stopImmediatePropagation() tidak menyelesaikan masalah, kerana klik dan klik dua kali adalah jenis acara yang berbeza. Kuncinya adalah untuk mengelakkan peristiwa klik dua kali elemen kanak-kanak dari bubbled.

Kaedah 1: Tambahkan acara klik dua kali ke elemen kanak-kanak

Tambahkan acara klik dua kali pada elemen kanak-kanak, tetapi tidak melakukan apa-apa, hanya menghalang acara dari bubbled:

 tiada apa -apa (acara) {
  event.stoppropagation ();
};

Kaedah 2: Penghakiman Sumber Acara

Dalam fungsi pengendali acara klik dua kali elemen induk, periksa event.target sumber acara.Target:

 changeFullScreen (event) {
    jika (event.target === ini $ el) {// ini. $ el menunjuk kepada unsur induk console.log ('bbbb');
    }
}

Acara klik dua kali dilaksanakan hanya jika sumber acara adalah elemen induk itu sendiri.

Melalui dua kaedah di atas, peristiwa klik elemen kanak-kanak dapat dicegah dengan berkesan daripada mengganggu peristiwa klik dua kali elemen induk, memastikan ketepatan logik program.

Atas ialah kandungan terperinci Bagaimana untuk mengelakkan peristiwa klik elemen kanak-kanak daripada mempengaruhi peristiwa klik dua kali elemen induk?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!