1<div id="Box"style="width:100%;height:100%;border:1px solid red;"></div>2 3<script>4 //define variables for recording coordinates and angles5 varStartx,movex,endx,nx;6 //Start Touch function, event is touch object7function Touchs (Event){8 Event. Preventdefault ();//Block Browser default scrolling events9 varbox = document.getElementById ('Box');//Get DOM TagsTen if(Event. type=="Touchstart"){//determine which touch event Event.type performed by using the IF statement OneConsole.log ('Start'); A varTouch =Event. touches[0];//gets the first touch position of the array at the beginning of the position -StartX = Math.floor (Touch.pagex);//gets the x-axis of the first coordinate -}Else if(Event. type=="Touchmove"){//get the coordinates in the touch theConsole.log ('Slide in'); - varTouch =Event. touches[0]; -Movex =Math.floor (Touch.pagex); -}Else if(Event. Type = ="Touchend"||Event. Type = ="Touchcancel"){//when the finger leaves the screen or the system cancels the touch event +EndX = Math.floor (Event. changedtouches[0].pagex);//get the last coordinate position -Console.log ('End'); +NX = Endx-startx;//get the distance from the start position and the left position A //judging the sliding direction at if(NX >0){ -Alert'Swipe Right'); - return false; -}Else{ -Alert'Swipe left'); - return false; in } - } to } + //Add listening for touch events and line up custom touch functions -Box.addeventlistener ('Touchstart', Touchs,false); theBox.addeventlistener ('Touchmove', Touchs,false); *Box.addeventlistener ('Touchend', Touchs,false); $</script>
JS Mobile left and right sliding events