參考
移動端touch事件和click事件的區(qū)別
在手持設(shè)備上使用 touchstart 事件代替 click 事件是不是個好主意？

一、四種touch事件

touchstart: //手指放到屏幕上時觸發(fā)
touchmove: //手指在屏幕上滑動式觸發(fā)
touchend: //手指離開屏幕時觸發(fā)
touchcancel: //系統(tǒng)取消touch事件的時候觸發(fā)，這個好像比較少用
每個觸摸事件被觸發(fā)后，會生成一個event對象

二、touch事件和click事件的區(qū)別

在移動端，手指點擊一個元素，會經(jīng)過：touchstart --> touchmove -> touchend --》click。

在手持設(shè)備的瀏覽器上（本處主要指代iOS和Android系統(tǒng)上的webkit內(nèi)核的瀏覽器和嵌入在應(yīng)用程序里面的webview），由于兩次連續(xù)“輕觸”是“放大”的操作（即使你兩次輕觸的是一個鏈接或一個有click事件監(jiān)聽器的元素），所以在第一次被“輕觸”后，瀏覽器需要先等一段時間，看看有沒有所謂的“連續(xù)的第二次輕觸”。如果有，則進行“放大”操作。沒有，才敢放心地認為用戶不是要放大，而是需要“click”至此才敢觸發(fā)click事件，導(dǎo)致“短按（手指接觸屏幕到離開屏幕的時間比較短）”的click事件通常約會延遲300ms左右。

采用touchstart代替click是比較初級的解決方案，首先，touchstart和click的觸發(fā)條件就有區(qū)別，對于手持設(shè)備的瀏覽器：1.touchstart：在這個dom（或冒泡到這個dom，這當(dāng)然是廢話）上手指觸摸開始即能觸發(fā)2.click：在這個dom（或冒泡到這個dom，這當(dāng)然是廢話）上手指觸摸開始，且手指未曾在屏幕上移動（某些瀏覽器允許移動一個非常小的位移值），且在這個在這個dom上手指離開屏幕，且觸摸和離開屏幕之間的間隔時間較短（某些瀏覽器不檢測間隔時間，也會觸發(fā)click）才能觸發(fā)于是我們可以看到，完全用touchstart代替是不太可取的。根據(jù)上面的區(qū)別，又要規(guī)避click在移動手持設(shè)備上帶來的延遲，很容易有了模擬的辦法，大致思路是：在touchstart、touchend時記錄時間、手指位置，在touchend時進行比較，如果手指位置為同一位置（或允許移動一個非常小的位移值）且時間間隔較短（一般認為是200ms），且過程中未曾觸發(fā)過touchmove，即可認為觸發(fā)了手持設(shè)備上的“click”，一般稱它為“tap”