移動端常用事件

touchstart 與 click

touchstart : 觸摸開始事件，當手指接觸屏幕上的一剎那，觸發該事件。
click: PC端點擊事件，在移動端也可以使用，不過會有200ms延遲，一般不建議使用。

	var box = document.getElementById("touchstart");
    box.addEventListener("touchstart", function (e) {
        //e.preventDefault()      //阻止鼠標事件觸發
       console.log('touchstart'); 
    });
     box.addEventListener("click", function (e) {
       console.log('click'); 
    });

看到控制檯，touchstart先執行，而click要等一小段時間才執行(肉眼可見)；
如果不想讓click觸發，阻止默認事件就可：e.preventDefault()

touchmove

手指在某區域持續滑動，會觸發該事件

box.addEventListener("touchmove", function (e){
        //do something
})

使用該事件時切記要做好函數節流，畢竟移動端性能有限，函數防抖與節流詳見我上篇文章 函數防抖與節流

touchend

某區域內觸摸事件結束的一剎那觸發該事件，或稱手指擡起的一瞬間。

// touchend觸摸結束
    box.addEventListener("touchend", function (e){
        console.log('touchend事件');
    })

touchEvent

TouchEvent是一個對象，在做移動端業務或功能需求的時候，經常會用到。可以試着打印一下，看它裏面有些什麼

box.addEventListener('touchstart', function(e) {
    console.dir(e); // 查看TouchEvent對象的屬性和方法
});

打印結果

重點講一下這三個常用的
changedTouches：一個 TouchList 對象，包含了代表所有從上一次觸摸事件到此次事件過程中，狀態發生了改變的觸點的 Touch 對象。做移動端滑動事件會用到。

targetTouches：一個 TouchList 對象，是包含了如下觸點的 Touch 對象：觸摸起始於當前事件的目標 element 上，並且仍然沒有離開觸摸平面的觸點。

touches：一 個 TouchList 對象，包含了所有當前接觸觸摸平面的觸點的 Touch 對象，無論它們的起始於哪個 element 上，也無論它們狀態是否發生了變化。多指操作，獲取多個觸點會用到