觸摸時代的到來，離不開觸摸事件 touch 事件用于移動端，可響應用戶手指（或觸控筆）對屏幕或者觸控板操作，給基于觸控操作，給基于觸控的用戶界面提供可靠的支持。 touch 相關的事件跟普通的其他 dom 事件一樣使用，可以直接用 addEventListener 來監聽和處理。 最基本的 touch 事件包括4個事件： 1. touchstart：當在屏幕上按下手指時觸發 2. touchmove：當在屏幕上移動手指時觸發 3. touchend：當在屏幕上抬起手指時觸發 4. touchcancel：當一些更高級別的事件發生的時候（如電話接入或者彈出信息）會取消當前的 touch 操作，即觸發 touchcancel。一般會在 touchcancel 時暫停游戲、存檔等操作。 ## 1、touch 事件與 click 事件 在很多情況下，觸摸事件和鼠標事件會同時被觸發（目的是讓沒有對觸摸設備優化的代碼仍然可以在觸摸設備上正常工作）。 因為雙擊縮放檢測的存在，在移動設備屏幕上點擊操作的事件執行順序： touchstart(瞬間觸發) ——> touchend ——> click(200 - 300ms延遲) > 如果你使用了觸摸事件，可以調用 event.preventDefault() 來阻止鼠標事件被觸發。 ## 2、touchstart 事件 當用戶手指觸摸到的觸摸屏的時候觸發。事件對象的 target 就是touch 發生位置的那個元素。 ~~~ <div> 點擊我！ </div> <script> var box = document.querySelector("div"); box.addEventListener("touchstart", function (e) { console.log('touchstart'); }); </script> ~~~ ## 3、touchmove 事件 當用戶在觸摸屏上移動觸點(手指)的時候，觸發這個事件。一定是先要觸發 touchstart 事件，再有可能觸發 touchmove 事件。 ?touchmove 事件的 target 與最先觸發的 touchstart 的 target 保持一致。touchmove 事件和鼠標的 mousemove事件一樣都會多次重復調用，所以，事件處理時不能有太多耗時操作。不同的設備，移動同樣的距離 touchmove 事件的觸發頻率是不同的。 > 1. 即使手指移出了原來的 target 元素，則 touchmove 仍然會被一直觸發，而且 target 仍然是原來的 target 元素。 > 2. touchmove 事件會多次重復觸發，由于移動端計算資源寶貴，盡量保證事件節流。 ~~~ <div> <p></p> </div> <script> var i = 1; var box = document.querySelector("div"); var p = document.querySelector("p"); box.addEventListener("touchmove", function (e){ p.innerHTML = e.target.tagName + ", " + i++; }) </script> ~~~ ## 4、touchend 事件 ? 當用戶的手指抬起的時候，會觸發 touchend 事件。如何用戶的手指從觸屏設備的邊緣移出了觸屏設備，也會觸發 touchend 事件。 > touchend 事件的 target 也是與 touchstart 的 target 一致，即使已經移出了元素。 ## 5、touchcancel 事件 ? 當觸點由于某些原因被中斷時觸發。有幾種可能的原因如下(具體的原因根據不同的設備和瀏覽器有所不同): * 由于某個事件取消了觸摸：例如觸摸過程被一個模態的彈出框打斷。 * 觸點離開了文檔窗口，而進入了瀏覽器的界面元素、插件或者其他外部內容區域。 * 當用戶產生的觸點個數超過了設備支持的個數，從而導致 TouchList 中最早的 Touch對象被取消 > touchcancel 事件一般用于保存現場數據。比如：正在玩游戲，如果發生了 。touchcancel 事件，則應該把游戲當前狀態相關的一些數據保存起來。