標籤：tar swipe pre mat rtx rem asc starty als
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <style type="text/css"> .touch-box{ background-color: #444; color:white; width: 200px; height: 200px; } </style> <div id="touch-box" class="touch-box"></div> <script type="text/javascript"> var bgColors=[‘#BB0D0D‘,‘#189135‘,‘#1173C0‘]; var idx=0; var el=document.getElementById(‘touch-box‘); var startX,startY; function handleStart(e){ if(e.touches.length!==1) return startX=e.touches[0].pageX; startY=e.touches[0].pageY; el.addEventListener(‘touchmove‘,handleMove,false); } function handleMove(e){ var touches=e.touches; if(touches&&touches.length){ var deltaX=startX-touches[0].pageX; var deltaY=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></html>
分別取touchstart事件和touchmove事件中事件對象（e.touches[0]）的pageX和pageY屬性，相減後進行判斷，判斷之後記得移除touchmove事件
移動端-類比手勢事件
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
