Maison > interface Web > js tutoriel > Comment calculer la distance de glissement à l'aide d'un événement tactile sur un téléphone mobile JS

Comment calculer la distance de glissement à l'aide d'un événement tactile sur un téléphone mobile JS

小云云
Libérer: 2018-01-02 13:15:47
original
2765 Les gens l'ont consulté

Cet article présente principalement la méthode de calcul de la distance de glissement par les événements tactiles du téléphone mobile JS et analyse les compétences opérationnelles associées de javascript en réponse aux événements tactiles sur l'écran du téléphone mobile pour calculer la distance de glissement. référez-vous à cela. J'espère que cela pourra aider tout le monde.

Calculez la distance du geste lorsqu'il glisse sur l'écran du téléphone. Le code est le suivant :

function wetherScroll(){
    var startX = startY = endX =endY =0;
    var body=document.getElementsByTagName("body");
    body.bind('touchstart',function(event){
      var touch = event.targetTouches[0];
      //滑动起点的坐标
      startX = touch.pageX;
      startY = touch.pageY;
      // console.log("startX:"+startX+","+"startY:"+startY);
    });
    body.bind("touchmove",function(event){
      var touch = event.targetTouches[0];
      //手势滑动时,手势坐标不断变化,取最后一点的坐标为最终的终点坐标
        endX = touch.pageX;
        endY = touch.pageY;
        // console.log("endX:"+endX+","+"endY:"+endY);
    })
    body.bind("touchend",function(event){
      var distanceX=endX-startX,
        distanceY=endY - startY;
        // console.log("distanceX:"+distanceX+","+"distanceY:"+distanceY);
        //移动端设备的屏幕宽度
        var clientHeight; =document.documentElement.clientHeight;
        // console.log(clientHeight;*0.2);
        //判断是否滑动了,而不是屏幕上单击了
        if(startY!=Math.abs(distanceY)){
 //在滑动的距离超过屏幕高度的20%时,做某种操作
          if(Math.abs(distanceY)>clientHeight*0.2){
 //向下滑实行函数someAction1,向上滑实行函数someAction2
          distanceY <0 ? someAction1():someAction2();
        }
        }
        startX = startY = endX =endY =0;
    })
}
Copier après la connexion

Recommandations associées :

Événements tactiles associés Connaissance de l'analyse et de l'encapsulation

Solution au problème de pénétration de l'événement Touchstart mobile

Introduction détaillée de l'événement tactile de l'écran tactile mobile HTML5

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!

Étiquettes associées:
source:php.cn
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