移動端事件touchstart、touchmove、touchend詳解

在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的手指個數

感謝閱讀！但願能共同進步！