手機HTML之touch小記

最近在考慮一個手機站開發，設計師總能有些奇思妙想，但手機HTML上的展示效果肯定比不上APP和桌面瀏覽器，最後只確定了一個滑動切換圖片的功能。

手機瀏覽器的touch事件：touchstart，touchmove，touchend，touchcancel。

試了一下android和IOS上的瀏覽器支持以上方法，WP8不支持。

這些事件需要綁定

document.addEventListener('touchstart',function(e){
    startX = e.touches[0].pageX;
},false);

android測試發現，點擊屏幕觸發touchstart和touchend事件；滑動觸發touchstart和一次touchmove事件，未觸發touchend。

加上event.preventDefault()取消瀏覽器默認事件以後正常；

document.addEventListener('touchstart',function(ev){
    event.preventDefault();
    startX = ev.touches[0].pageX;
},false);

點擊觸發touchstart，移動中多次觸發touchmove，結束觸發touchend。