Bagaimanakah Saya Boleh Jadikan Fungsi `document.click` saya Berfungsi dengan Amanah pada Kedua-dua Peranti Desktop dan Sentuh?

Dokumen .klik Fungsi untuk Peranti Sentuh: Panduan Komprehensif

Apabila membuat halaman web interaktif, membolehkan pengguna berinteraksi dengan elemen pada kedua-dua desktop dan peranti sentuh adalah penting. Satu cabaran biasa timbul apabila menggunakan fungsi document.click untuk mengendalikan input pengguna, kerana ia mungkin tidak berfungsi seperti yang diharapkan pada peranti sentuh.

Untuk memahami isu ini, mari pertimbangkan senario berikut. Anda mempunyai menu sub-navigasi yang berkembang apabila item senarai diklik. Untuk menutup menu lungsur, anda mahu pengguna boleh mengklik mana-mana sahaja pada skrin. Walau bagaimanapun, fungsi ini mungkin tidak berfungsi pada peranti sentuh kerana pengehadan acara document.click.

Penyelesaian untuk Peranti Sentuh

Untuk mengatasi isu ini, anda boleh menggunakan pendekatan alternatif yang menyokong input klik dan sentuh. Berikut ialah penyelesaian yang dikemas kini:

$(document).on('click touchstart', function () {
  if ($(".children").is(":visible")) {
    $("ul.children").slideUp('slow');
  }
});

Tambahan utama di sini ialah pendengar acara permulaan sentuh. Peristiwa ini dicetuskan sebaik sahaja pengguna menyentuh elemen pada skrin, menyediakan cara yang konsisten untuk mengesan interaksi pengguna pada kedua-dua desktop dan peranti sentuh.

Dengan menggabungkan peristiwa klik dan mula sentuh, anda memastikan dokumen itu Fungsi .click bertindak balas kepada input pengguna tanpa mengira kaedah input. Penyelesaian ini membolehkan pengguna menogol menu lungsur turun menggunakan sama ada tetikus atau input sentuhan, mewujudkan pengalaman pengguna yang lancar.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Jadikan Fungsi `document.click` saya Berfungsi dengan Amanah pada Kedua-dua Peranti Desktop dan Sentuh?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!