Comment pouvez-vous détecter qu'un utilisateur a glissé son doigt dans une certaine direction sur une page Web avec JavaScript?
Je me demandais s'il y avait une solution qui fonctionnerait pour les sites Web à la fois sur l'iPhone et sur un téléphone Android.
Réponses:
Exemple de code JS vanilla simple:
Testé sur Android.
la source
touchstart
,touchmove
?Sur la base de la réponse de @ givanse, voici comment vous pouvez le faire avec
classes
:Vous pouvez alors l'utiliser comme ceci:
la source
.bind
undefined car voushandleTouchMove
n'avez en fait rien renvoyé. il est également inutile d'appeler bind lors de l'appel de la fonction avecthis.
car il est déjà lié au contexte actuel.bind(this);
et cela a fonctionné gracieusement. merci @nicholas_rtouches[0]
àchangedTouches[0]
et le type de gestionnaire d'événementshandleTouchMove
àhandleTouchEnd
run()
deux fois et vous obtenez une fuite de mémoire désagréableJ'ai fusionné quelques-unes des réponses ici dans un script qui utilise CustomEvent pour déclencher des événements balayés dans le DOM. Ajoutez le script 0.7k swiped-events.min.js à votre page et écoutez les événements glissés :
glissé vers la gauche
glissé vers la droite
balayé
glissé vers le bas
Vous pouvez également attacher directement à un élément:
Configuration en option
Vous pouvez spécifier les attributs suivants pour modifier le fonctionnement de l'interaction de balayage dans votre page (ils sont facultatifs) .
Le code source est disponible sur Github
la source
ce que j'ai utilisé auparavant, c'est que vous devez détecter l'événement mousedown, enregistrer son emplacement x, y (selon ce qui est pertinent), puis détecter l'événement mouseup et soustraire les deux valeurs.
la source
jQuery Mobile inclut également la prise en charge des swipes: http://api.jquerymobile.com/swipe/
Exemple
la source
J'ai trouvé @givanse brillante réponse comme étant la plus fiable et compatible sur plusieurs navigateurs mobiles pour enregistrer des actions de balayage.
Cependant, il y a un changement dans son code nécessaire pour le faire fonctionner dans les navigateurs mobiles modernes qui utilisent
jQuery
.event.touches
n'existera pas sijQuery
est utilisé et résulte enundefined
et doit être remplacé parevent.originalEvent.touches
. SansjQuery
,event.touches
devrait fonctionner correctement.Donc, la solution devient,
Testé sur:
la source
event.originalEvent
. La choseevent.touches
a cessé d'exister maintenant et se traduit parundefined
.event.originalEvent
. Je mettrai à jour ma réponse. Merci! :)J'ai reconditionné en
TouchWipe
tant que plugin jquery court:detectSwipe
la source
Un mod de réponse la plus élevée (ne peut pas commenter ...) pour faire face à de courts balayages
la source
trashold, timeout swipe, swipeBlockElems add.
la source
Si quelqu'un essaie d'utiliser jQuery Mobile sur Android et a des problèmes avec la détection de balayage JQM
(J'en avais sur Xperia Z1, Galaxy S3, Nexus 4 et certains téléphones Wiko aussi) cela peut être utile:
Le balayage sur Android n'a été détecté que s'il s'agissait d'un balayage très long, précis et rapide.
Avec ces deux lignes cela fonctionne correctement
la source
$.event.special.swipe.scrollSupressionThreshold = 8;
mais tu m'as mis dans la bonne direction! Je vous remercie!J'ai eu des problèmes avec le gestionnaire de touche qui tirait en continu pendant que l'utilisateur traînait un doigt. Je ne sais pas si cela est dû à quelque chose que je fais mal ou non, mais j'ai recâblé cela pour accumuler des mouvements avec touchmove et touchend déclenche le rappel.
J'avais également besoin d'avoir un grand nombre de ces instances et j'ai donc ajouté des méthodes d'activation / désactivation.
Et un seuil où un bref coup ne se déclenche pas. Touchstart zéro est les compteurs à chaque fois.
Vous pouvez modifier le target_node à la volée. L'activation à la création est facultative.
la source
J'ai également fusionné quelques-unes des réponses, principalement la première et la seconde avec les classes, et voici ma version:
Ensuite, vous pouvez l'utiliser comme suit:
Il permet d'éviter les erreurs de console lorsque vous souhaitez appeler uniquement la méthode "onLeft".
la source
Utilisé deux:
jQuery mobile: fonctionne dans la plupart des cas et spécialement lorsque vous développez une application qui utilise un autre plugin jQuery, alors mieux d'utiliser les contrôles jQuery mobile pour cela. Visitez-le ici: https://www.w3schools.com/jquerymobile/jquerymobile_events_touch.asp
Temps de marteau ! l'une des meilleures bibliothèques basées sur javascript, légères et rapides. Visitez-le ici: https://hammerjs.github.io/
la source
Si vous avez juste besoin de glisser, vous êtes mieux en termes de taille en utilisant uniquement la pièce dont vous avez besoin. Cela devrait fonctionner sur n'importe quel appareil tactile.
C'est ~ 450 octets après compression gzip, minification, babel etc.
J'ai écrit la classe ci-dessous sur la base des autres réponses, elle utilise un pourcentage déplacé au lieu de pixels et un modèle de répartiteur d'événements pour accrocher / décrocher les choses.
Utilisez-le comme ceci:
la source
Je voulais détecter le balayage gauche et droit uniquement, mais ne déclencher l'action que lorsque l'événement tactile se termine , j'ai donc légèrement modifié l'excellente réponse de @ givanse pour ce faire.
Pourquoi faire ça? Si, par exemple, en glissant, l'utilisateur remarque qu'il ne veut finalement pas glisser, il peut déplacer son doigt à la position d'origine (une application de téléphone "dating" très populaire le fait;)), puis le "glisser vers la droite" l'événement est annulé.
Donc, pour éviter un événement "glisser vers la droite" simplement parce qu'il y a une différence de 3 pixels horizontalement, j'ai ajouté un seuil en dessous duquel un événement est rejeté: pour avoir un événement "glisser vers la droite", l'utilisateur doit balayer au moins 1/3 de la largeur du navigateur (bien sûr, vous pouvez le modifier).
Tous ces petits détails améliorent l'expérience utilisateur. Voici le code (Vanilla JS):
la source
Exemple simple de vanille JS pour un balayage horizontal:
Vous pouvez utiliser la même logique pour le balayage vertical.
la source
Ajout à cette réponse ici . Celui-ci ajoute la prise en charge des événements de souris pour les tests sur le bureau:
la source
J'ai retravaillé la solution de @givanse pour qu'elle fonctionne comme un hook React. L'entrée est des écouteurs d'événements facultatifs, la sortie est une référence fonctionnelle (doit être fonctionnelle pour que le hook puisse se réexécuter lorsque / si la référence change).
Également ajouté dans les paramètres de seuil de balayage vertical / horizontal, afin que de petits mouvements ne déclenchent pas accidentellement les écouteurs d'événements, mais ceux-ci peuvent être définis sur 0 pour imiter la réponse originale de plus près.
Conseil: pour de meilleures performances, les fonctions d'entrée de l'écouteur d'événements doivent être mémorisées.
la source
Un exemple d'utilisation avec offset.
la source
Vous pourriez avoir plus de facilité à l'implémenter avec des événements de souris à prototyper.
Il existe de nombreuses réponses ici, y compris le haut, doivent être utilisées avec prudence car elles ne prennent pas en compte les cas de bord, en particulier autour des boîtes englobantes.
Voir:
Vous devrez expérimenter pour attraper les cas de bord et les comportements tels que le pointeur se déplaçant à l'extérieur de l'élément avant de se terminer.
Un balayage est un geste très basique qui est un niveau supérieur de traitement d'interaction de pointeur d'interface à peu près entre le traitement des événements bruts et la reconnaissance de l'écriture manuscrite.
Il n'y a pas de méthode exacte unique pour détecter un coup ou une aventure, bien que pratiquement tous suivent généralement un principe de base de détection d'un mouvement à travers un élément avec un seuil de distance et de vitesse ou de vitesse. Vous pourriez simplement dire que s'il y a un mouvement sur 65% de la taille de l'écran dans une direction donnée dans un délai donné, c'est un coup. C'est à vous de décider exactement où vous tracez la ligne et comment vous la calculez.
Certains pourraient également le regarder du point de vue de l'élan dans une direction et de la distance à laquelle il a été poussé lorsque l'élément est relâché. Cela est plus clair avec des glissements collants où l'élément peut être déplacé, puis au relâchement, il rebondira ou volera sur l'écran comme si l'élastique se cassait.
Il est probablement idéal d'essayer de trouver une bibliothèque de gestes que vous pouvez porter ou réutiliser, qui est couramment utilisée pour la cohérence. Beaucoup d'exemples ici sont excessivement simplistes, enregistrant un coup comme le moindre contact dans n'importe quelle direction.
Android serait le choix évident mais a le problème opposé, il est trop complexe.
Beaucoup de gens semblent avoir mal interprété la question comme tout mouvement dans une direction. Un balayage est un mouvement large et relativement bref dans une grande majorité de directions (bien qu'il puisse être arqué et avoir certaines propriétés d'accélération). Une aventure est similaire, mais a l'intention de propulser négligemment un élément à une bonne distance sous son propre élan.
Les deux sont suffisamment similaires pour que certaines bibliothèques ne fournissent que fling ou swipe, qui peuvent être utilisées de manière interchangeable. Sur un écran plat, il est difficile de vraiment séparer les deux gestes et, d'une manière générale, les gens font les deux (en faisant glisser l'écran physique mais en jetant l'élément d'interface utilisateur affiché à l'écran).
Votre meilleure option est de ne pas le faire vous-même. Il existe déjà un grand nombre de bibliothèques JavaScript pour détecter les gestes simples .
la source