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

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>

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!