Maison > interface Web > js tutoriel > Comment détecter la direction du glissement du doigt sur les pages Web mobiles avec JavaScript (compatibilité iPhone/Android) ?

Comment détecter la direction du glissement du doigt sur les pages Web mobiles avec JavaScript (compatibilité iPhone/Android) ?

DDD
Libérer: 2024-10-19 18:50:30
original
705 Les gens l'ont consulté

How to Detect Finger Swipe Direction on Mobile Web Pages with JavaScript (iPhone/Android Compatibility)?

Détection des glissements de doigt sur les pages Web mobiles

Dans le monde actuel centré sur le mobile, il est crucial de fournir des expériences Web intuitives et réactives sur tous les appareils . Les utilisateurs attendent une navigation et une interaction fluides sur les iPhones et les téléphones Android. Un geste courant essentiel pour la navigation mobile est le glissement du doigt.

Problème : Comment détecter avec précision la direction du glissement du doigt d'un utilisateur sur une page Web à l'aide de JavaScript, garantissant ainsi la compatibilité entre les appareils iPhone et Android ?

Solution : Heureusement, les navigateurs modernes fournissent des API JavaScript qui permettent aux développeurs de suivre les événements tactiles. Voici un simple extrait de code Vanilla JS que vous pouvez intégrer à votre projet :

<code class="javascript">document.addEventListener('touchstart', handleTouchStart, false);        
document.addEventListener('touchmove', handleTouchMove, false);

var xDown = null;                                                        
var yDown = null;

function getTouches(evt) {
  return evt.touches ||             // browser API
         evt.originalEvent.touches; // jQuery
}                                                     
                                                                         
function handleTouchStart(evt) {
    const firstTouch = getTouches(evt)[0];                                      
    xDown = firstTouch.clientX;                                      
    yDown = firstTouch.clientY;                                      
};                                                
                                                                         
function handleTouchMove(evt) {
    if ( ! xDown || ! yDown ) {
        return;
    }

    var xUp = evt.touches[0].clientX;                                    
    var yUp = evt.touches[0].clientY;

    var xDiff = xDown - xUp;
    var yDiff = yDown - yUp;
                                                                         
    if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
        if ( xDiff > 0 ) {
            /* right swipe */ 
        } else {
            /* left swipe */
        }                       
    } else {
        if ( yDiff > 0 ) {
            /* down swipe */ 
        } else { 
            /* up swipe */
        }                                                                 
    }
    /* reset values */
    xDown = null;
    yDown = null;                                             
};</code>
Copier après la connexion

Test : Cet extrait de code a été testé et confirmé pour fonctionner sur les appareils Android. Implémentez-le dans votre projet pour améliorer l'expérience utilisateur des utilisateurs mobiles sur les téléphones iPhone et Android.

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!

source:php
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal