在PC端上的JS事件相信大家已經熟悉不少，諸如click\mouseover這類事件，都可以滿足交互的需要，雖然移動端上的事件可能平常稍有接觸，但是可能不太了解其中具體的用法區別。

前言：

這幾個事件最早出現于IOS safari中，為了向開發人員轉達一些特殊的信息，所以新增了這些事件，隨著Android中的webkit的加入，慢慢地這樣的專有事件成了事實的標準，從而導致W3C開始指定Touch Event規范的內容。

具體說來有這樣幾個事件：

• touchstart 手指觸摸屏幕時觸發，即使已經有手指在屏幕上也會觸發。
• touchmove 手指在屏幕滑動時觸發。
• touchend 手指從屏幕時移開時觸發。

事件定義的方式:

大致上分為DOM0事件和DOM2事件兩種.

DMO0事件，就是傳統的直接將事件作為屬性設置的形式：

div1.ontouchstart = function(){alert(1);} 復制代碼

DOM2事件，則是用addEventListener的方式來綁定事件處理程序：

div1.addEventListener("touchstart",function(){alert(1);}); 復制代碼

大多數時候不推崇第一種方式，這種方式在移動端使用時好時壞，不建議使用。

PC的事件比移動端上的事件響應的慢300ms:

在早期的手機上，瀏覽器為了能夠實現放大和縮放功能，采用雙擊的方式來達到這樣的交互效果，為了實現這樣的效果，瀏覽器需要判斷用戶在第一次觸碰屏幕之后，是否在300ms之內再次點擊，有則表明用戶希望縮放和放大，所以click事件會推遲到300ms之后運行。

var div = document.querySelector("#div");div.onclick = function(){console.log("click!");}div.ontouchstart = function(){console.log("touchstart!");} 復制代碼

可以看到每次點擊，touchstart總會先于click事件運行。 當然這方面的問題有專門的庫用于解決延遲的問題。諸如:Fastclick

點擊穿透問題：

這個問題在當有一個絕對定位或固定定位元素綁定了touch事件，那么覆蓋在他之下的具有點擊特性的元素也會被觸發。

比如: 有一個遮罩層A元素，他的底下有一個鏈接元素B. 當這個遮罩層點擊之后希望遮罩層消失，真實的狀況是這時候點擊遮罩層不見的同時會跳轉頁面。 復制代碼

這是為什么？ 前面說過了touchstart會先于click事件執行，當上述的這個遮罩層消失在300ms之內消失時，那么他底下的具有點擊特性的元素會被觸發。大家可以私下模擬上述的例子。

如何解決？

下層元素不使用點擊特性的元素

我可以去某寶的移動版網站上看，他首頁使用的多層的DIV來代替A標簽

這種方法不太推薦，因為a標簽能夠為SEO提供一些信息

阻止所有點擊：

document.addEventListener("click",function(ev){ev.preventDefault(); }) document.addEventListener("touchstart",function(ev){ev.preventDefault(); }) 復制代碼

這時候的有點擊特性的元素的交互行為將會失效，當然也可以根據實際需要重新開啟交互行為。

代碼如下：

a.ontouchstart = function(){window.location = this.href;} 復制代碼

這樣既兼顧了SEO又可以安然使用點擊事件。當然它還有其他的好處。

• 能夠阻止IOS10縮放： 對于ISO10設置meta標簽禁止縮放是沒有作用的，上面的代碼阻止了瀏覽器的默認行為。
• 阻止IOS10下回彈效果
• 去除系統滾動條
• 禁止長按選中文字和圖片：當然也同時阻止了input獲取焦點的行為，這就需要使用單獨為input添加一個阻止冒泡的行為。以免事件冒泡至頂層元素而被阻止交互行為。

input.ontouchstart = function(ev){ev.stopPropagation(); } 復制代碼

移動端事件對象：

注意到前面的例子里每一個事件處理程序都有一個evt的參數了嗎，那是有關于當前觸摸的相關信息，通過這樣一個對象，能夠獲取到當前觸碰的坐標，觸碰的手指個數等等。 其中最重要的常用的莫過于手指列表了。

touches:當前位于屏幕下的手指列表信息 targetTouches: 當前位于當前元素下的手指列表信息 changedTouches: 當前涉及到當前事件的手指列表 復制代碼

這三個手指列表都存在觸碰事件對象里面，在每次發生觸碰之后這里的列表都會更新。

var div = document.querySelector("#div");div.ontouchmove = function(evt){this.innerHTML = `touches-length:${evt.touches.length}targetTouches-length:${evt.targetTouches.length}changedTouches-length:${evt.changedTouches.length}`console.log(evt);} 復制代碼

以上實例，在手指移動于DIV上之后會更新DIV的內容。 分別展示了touches、targetTouches、changedTouches的手指個數

感謝閱讀！希望能共同進步！

總結

以上是生活随笔為你收集整理的移动端事件touchstart、touchmove、touchend详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。