Comment détecter et déterminer la direction du glissement du doigt en JavaScript sur iPhone et Android ?

Détection des mouvements de doigt en JavaScript sur iPhone et Android

Dans le monde actuel centré sur le mobile, il est essentiel de fournir des expériences utilisateur fluides sur une variété d'appareils. Un aspect qui contribue de manière significative à la convivialité est la capacité de détecter les mouvements du doigt dans les applications Web. Cet article présente une solution Vanilla JS qui répond à ce défi sur les plates-formes iPhone et Android.

Identification des balayages de l'utilisateur

Pour détecter les glissements de doigt en JavaScript, nous utiliserons des écouteurs d'événements pour « touchstart » et 'touchmove'. Ces auditeurs suivent le point de contact initial (xDown, yDown), puis surveillent les mouvements tactiles ultérieurs.

Détermination de la direction du balayage

La clé pour identifier la direction du balayage réside dans le calcul de la différence entre les points de contact au cours du mouvement. événement 'touchmove'. En comparant cette différence sur les axes x et y, nous pouvons établir le mouvement le plus significatif :

• Si la différence sur l'axe x est supérieure à celle sur l'axe y : un balayage horizontal s'est produit .
• Sinon, un balayage vertical a eu lieu.

Sur la base de ces calculs, nous pouvons classer les balayages comme :

• Horizontal Balayages : vers la gauche ou la droite
• Balayages verticaux : vers le haut ou vers le bas

Exemple de code

L'extrait de code suivant fournit un simple implémentation pourtant efficace de la détection par balayage :

<code class="js">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>

Cet exemple de code a été testé avec succès sur les appareils Android.

Compatibilité des navigateurs

La solution fournie est compatible avec les navigateurs suivants sur iPhone et Android :

• Safari
• Chrome
• Firefox

Conclusion

Cette solution JavaScript permet vous permet de détecter efficacement les mouvements du doigt sur les appareils iPhone et Android. Il offre une base solide pour créer des applications Web plus intuitives et conviviales qui répondent naturellement aux gestes tactiles.

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!