<!doctype html>. Touch-box{Background-color: #444; Color:white; width:200px; height:200px; } </style> <div id= "Touch-box" class= "Touch-box" ></div> <script type= "Text/javascript" >varbgcolors=[' #BB0D0D ', ' #189135 ', ' #1173C0 ']; varIdx=0; varEl=document.getelementbyid (' Touch-box '); varStartx,starty; functionHandlestart (e) {if(e.touches.length!==1)returnStartX=e.touches[0].pagex; Starty=e.touches[0].pagey; El.addeventlistener (' Touchmove ', Handlemove,false); } functionHandlemove (e) {vartouches=e.touches; if(touches&&touches.length) { varDeltax=startx-touches[0].pagex; varDeltay=starty-touches[0].pagey; if(deltax>50) {Console.log (' Swipeleft '); IDX= (idx+1)%3; El.style.backgroundColor=Bgcolors[idx]; } if(deltax>-50) {Console.log (' Swiperight '); IDX=idx>=1?idx-1:2; El.style.backgroundColor=Bgcolors[idx]; } if(deltay>50) {Console.log (' Swipetop '); } if(deltay<-50) {Console.log (' Swipedown ') } if(Math.Abs (deltax) >=50| | Math.Abs (DeltaY) >=50) {El.removeeventlistener (' Touchmove ', Handlemove); }} event.preventdefault (); } el.addeventlistener (' Touchstart ', Handlestart); </script></body>Take the Pagex and Pagey properties of the event object (E.touches[0]) in the Touchstart event and the Touchmove event respectively, and then make a judgment after subtracting the Touchmove event.
Mobile-Analog gesture events
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
