Comment puis-je faire fonctionner ma fonction « document.click » de manière fiable sur les appareils de bureau et tactiles ?

Fonction Document .click pour les appareils tactiles : un guide complet

Lors de la création de pages Web interactives, permettant aux utilisateurs d'interagir avec des éléments sur les deux bureaux et les appareils tactiles sont cruciaux. Un défi courant survient lors de l'utilisation de la fonction document.click pour gérer les entrées utilisateur, car elle peut ne pas fonctionner comme prévu sur les appareils tactiles.

Pour comprendre le problème, considérons le scénario suivant. Vous disposez d'un menu de sous-navigation qui se développe lorsque vous cliquez sur un élément de la liste. Pour fermer la liste déroulante, vous souhaitez que les utilisateurs puissent cliquer n'importe où sur l'écran. Toutefois, cette fonctionnalité peut ne pas fonctionner sur les appareils tactiles en raison des limitations de l'événement document.click.

Solution de contournement pour les appareils tactiles

Pour surmonter ce problème, vous pouvez utiliser une approche alternative qui prend en charge à la fois la saisie par clic et par toucher. Voici une solution mise à jour :

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

L'ajout clé ici est l'écouteur d'événement touchstart. Cet événement est déclenché dès que l'utilisateur touche un élément à l'écran, offrant ainsi un moyen cohérent de détecter l'interaction de l'utilisateur sur les ordinateurs de bureau et les appareils tactiles.

En combinant les événements click et touchstart, vous vous assurez que le document La fonction .click répond aux entrées de l'utilisateur quelle que soit la méthode de saisie. Cette solution permet aux utilisateurs de basculer le menu déroulant à l'aide de la souris ou de la saisie tactile, créant ainsi une expérience utilisateur transparente.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!