HTML5触摸事件(touchstart、touchmove和touchend)的实现html5触摸事件判断滑动方向的实现HTML5触摸事件实现移动端简易进度条的实现方法整理HTML5移动端开发的常用触摸事件HTML5触摸事件演化tap事件介绍

 function load (){ document.addEventListener('touchstart',touch, false); document.addEventListener('touchmove',touch, false); document.addEventListener('touchend',touch, false); function touch (event){ var event = event || window.event; var oInp = document.getElementById("inp"); switch(event.type){ case "touchstart": oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")"; break; case "touchend": oInp.innerHTML = "
Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")"; break; case "touchmove": event.preventDefault(); oInp.innerHTML = "
Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")"; break; } } } window.addEventListener('load',load, false);

 function load(){ document.addEventListener('touchstart',touch, false); document.addEventListener('touchmove',touch, false); document.addEventListener('touchend',touch, false); function touch (event){ var event = event || window.event; var oInp = document.getElementById("inp"); var distance,clientX_start,clientX_end, minRange=10; this.clientX_start; this.direction; this.callbackFun=function(){ if(this.direction=='ltr') { console.log('从左往右'); } else { console.log('从右往左'); } } switch(event.type){ case "touchstart": clientX_start=event.touches[0].clientX; this.clientX_start=clientX_start; break; case "touchend": this.callbackFun(); break; case "touchmove": event.preventDefault(); clientX_end = event.changedTouches[0].clientX; //判断移动的方向 distance=clientX_end-this.clientX_start; if(this.clientX_start+minRangeclientX_end){ this.direction='rtl'; } break; } } } window.addEventListener('load',load, false);