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

Pandai mengelakkan konflik antara klik elemen kanak-kanak dan elemen induk dua kali klik klik

Dalam pembangunan front-end, konflik antara acara klik elemen kanak-kanak dan elemen induk acara klik dua kali sering sakit kepala. Terutamanya apabila mengklik elemen kanak-kanak dengan cepat, mudah untuk secara tidak sengaja mencetuskan peristiwa klik dua kali elemen induk. Artikel ini menyediakan dua kaedah untuk menyelesaikan masalah ini dengan berkesan.

Anggapkan bahawa struktur HTML adalah seperti berikut:

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

Dan fungsi pengendalian acara yang sepadan:

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

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

event.stopPropagation() atau return false tidak menyelesaikan masalah ini kerana acara klik dan acara klik dua kali adalah jenis acara yang berbeza.

Kaedah 1: Tambahkan acara dua klik kosong pada elemen kanak-kanak

Mengikat pengendali acara dua klik kosong pada elemen kanak-kanak untuk mengelakkan acara klik dua kali dari Bubbled:

 tiada apa -apa () {}; // fungsi kosong, tiada operasi // ... kod lain ...

Bind nothingFn ke acara klik dua kali elemen kanak-kanak untuk mengelakkan peristiwa klik dua kali dari bubbled ke atas, dengan itu mengelakkan mencetuskan fungsi changeFullScreen elemen induk.

Kaedah 2: Penghakiman berdasarkan elemen sasaran acara

Gunakan mekanisme gelembung peristiwa untuk menentukan sumber pencetus acara klik dua kali dengan menyemak event.target . Jika ia adalah elemen induk, changeFullScreen dilaksanakan; Jika ia adalah elemen kanak -kanak, ia diabaikan. Kaedah ini memerlukan mengubah logik pemprosesan acara klik dua kali untuk membolehkannya membezakan sumber acara tersebut.

Melalui dua kaedah di atas, acara klik elemen kanak-kanak dapat dicegah dengan berkesan daripada mencetuskan peristiwa klik elemen induk, dengan itu mengelakkan konflik peristiwa. Kaedah yang mana untuk dipilih bergantung kepada keperluan projek dan struktur kod tertentu.

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