Heim > Web-Frontend > js-Tutorial > Hauptteil

So berechnen Sie die Gleitstrecke mithilfe eines Touch-Ereignisses auf einem JS-Mobiltelefon

小云云
Freigeben: 2018-01-02 13:15:47
Original
2759 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Methode zur Berechnung der Gleitstrecke durch JS-Handy-Touch-Ereignisse vorgestellt und die damit verbundenen Bedienfähigkeiten von Javascript als Reaktion auf die Berührungsereignisse auf dem Handy-Bildschirm analysiert, um die Gleitstrecke zu berechnen Ich hoffe, es kann jedem helfen.

Berechnen Sie den Abstand der Geste, wenn sie auf dem Telefonbildschirm gleitet. Der Code lautet wie folgt:

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;
    })
}
Nach dem Login kopieren

Verwandte Empfehlungen:

Verwandte Berührungsereignisse Kenntnisse über Parsen und Kapselung

Lösung für das Problem der Durchdringung mobiler Touchstart-Ereignisse

Detaillierte Einführung des mobilen HTML5-Touchscreen-Berührungsereignisses

Das obige ist der detaillierte Inhalt vonSo berechnen Sie die Gleitstrecke mithilfe eines Touch-Ereignisses auf einem JS-Mobiltelefon. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage