Solution au conflit entre l'événement touchstart et l'événement click dans JS

Cet article vous présente principalement la solution au conflit entre l'événement touchstart et l'événement click dans JS. La méthode de solution est présentée de manière très détaillée à travers un exemple de code, qui a une certaine valeur de référence pour les études ou le travail de tous les amis qui en ont besoin. , veuillez suivre l'éditeur pour apprendre ensemble.

Avant-propos

L'Internet mobile est la tendance de développement future. Aujourd'hui, de nombreux géants nationaux de l'Internet se battent pour le gâteau mobile, comme WeChat Alipay et. Alipay est actuellement un exemple relativement réussi, et bien sûr, il existe diverses applications APP et Web.

L'article suivant présente principalement le contenu pertinent sur la résolution des conflits entre l'événement touchstart et l'événement click dans JS. Je ne dirai pas grand-chose ci-dessous, jetons un œil à l'introduction détaillée.

1. Description du scénario commercial

Lors de l'adaptation du site PC terminé au mobile, nous souhaitons que le site ait une réponse plus rapide vitesse sur les appareils mobiles pour offrir aux utilisateurs une meilleure expérience. À l'heure actuelle, nous devrions utiliser un système d'événements spécifique aux appareils mobiles, par exemple, utiliser l'événement touchstart au lieu de l'événement click.

Pourquoi serait-ce mieux ? Selon la description dans la documentation du développeur Google :

Les navigateurs sur les appareils mobiles retarderont l'événement de clic de 300 ms lorsqu'il est déclenché pour garantir qu'il s'agit d'un événement de "clic" plutôt que d'un événement de "double-clic". .
Pour l'événement touchstart, l'événement lié sera déclenché au moment où le doigt de l'utilisateur touche l'écran. Par conséquent, l’importance de l’utilisation de touchstart pour remplacer l’événement de clic est d’aider les utilisateurs à économiser 300 ms à chaque clic. Il est très nécessaire d'utiliser cette technologie dans les situations où la page nécessite fréquemment des clics, ou où les clics se produisent pendant les animations et nécessitent des exigences élevées en matière de maîtrise de l'animation.

Reprenons cependant notre scénario initial Lorsque le site PC est adapté au côté mobile, on ne peut pas simplement remplacer les événements touchstart et click car le PC ne reconnaît pas l'événement touchstart.

2. Raisons du conflit

Bien sûr, on peut lier touchstart et cliquer à un élément en même temps événement temporel, mais cela conduira au problème résolu dans cet article : les deux événements entreront en conflit sur les appareils mobiles.

Étant donné que les appareils mobiles peuvent reconnaître les événements touchstart et click en même temps, lorsque l'utilisateur clique sur l'élément cible, l'événement touchstart et l'événement click liés à l'élément cible (environ 300 ms plus tard) seront déclenchés en séquence. , c'est-à-dire que la fonction de rappel que nous avons liée sera exécutée deux fois ! . Ce n’est évidemment pas le résultat que nous souhaitons.

3· Solution

Pour cette situation, il existe les deux solutions suivantes :

(1) Utilisez PreventDefault

La première solution consiste à utiliser la méthode PreventDefault dans l'objet événement. La fonction de la méthode PreventDefault est d'empêcher l'apparition du comportement événementiel par défaut de l'élément, mais. c'est intéressant Oui, lorsque nous lions les événements touchstart et click à l'élément cible en même temps, l'utilisation de cette méthode dans la fonction de rappel d'événement touchstart peut empêcher les événements de clic ultérieurs de se produire.

Cela n'a aucun sens. Après tout, l'événement click que nous avons ajouté n'est pas "l'événement par défaut" de l'élément, mais il fonctionne, ou en d'autres termes, est implémenté par le navigateur, nous pouvons donc l'utiliser. Cette méthode résout le conflit entre l'événement touchstart et l'événement click sur les appareils mobiles. Le code spécifique est le suivant :

const Button = document.getElementById("targetButton")
Button.addEventListener("touchstart", e => {
 e.preventDefault()
 console.log("touchstart event!")
})
 
Button.addEventListener("click", e => {
 e.preventDefault()
 console.log("click event!")
})

Lorsque vous simulez l'appareil mobile sur. le navigateur Lorsque vous cliquez sur l'élément cible, vous ne verrez que le champ de l'événement touchstart dans la console. Évidemment, l'événement click est bloqué avec succès.

Résumé

L'avantage d'utiliser cette méthode est qu'elle est simple et grossière, directe et efficace, et peut bien atteindre nos objectifs, mais l'inconvénient est que le La méthode PreventDefault empêche l'événement de clic. La méthode est basée sur l'implémentation du navigateur et non sur le principe PreventDefault, ce qui entraînera une certaine incertitude, même si je n'ai pas encore trouvé de scénario spécifique dans lequel cette méthode échoue.

(2) Détection basée sur la fonction des événements de liaison

Nous pouvons encapsuler l'événement click de l'élément en jugeant si le navigateur prend en charge l'événement touchstart, de sorte que le le client will L'environnement détermine le type d'événement auquel l'élément doit être lié. Le code est le suivant :

const Button = document.getElementById("targetButton")
const clickEvent = (function() {
 if ('ontouchstart' in document.documentElement === true)
 return 'touchstart';
 else
 return 'click';
})();
 
Button.addEventListener(clickEvent, e => {
 console.log("things happened!")
})

Ce qui précède est ce pour quoi j'ai compilé. vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Exemple de code pour implémenter des images avec zoom au doigt dans l'applet WeChat

Basé sur le préchargement CSS dans vue détaillée explication de la méthode de configuration à l'aide de sass

Piège angulaire 4.x+Ionic3 Ionic3.x pop reverse value transfer explication détaillée

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!