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

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;
    })
}

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!