當用戶手指放在移動設備在屏幕上滑動會觸發的touch事件
webkit:
- touchstart——當手指觸碰屏幕時候發生。不管當前有多少只手指
- touchmove——當手指在屏幕上滑動時連續觸發。通常我們再滑屏頁面，會調用event的preventDefault()可以阻止默認情況的發生：阻止頁面滾動
- touchend——當手指離開屏幕時觸發
- touchcancel——系統停止跟蹤觸摸時候會觸發。例如在觸摸過程中突然頁面alert()一個提示框，此時會觸發該事件，這個事件比較少用
TouchEvent
- touches：屏幕上所有手指的信息
- targetTouches：手指在目標區域的手指信息
- changedTouches：最近一次觸發該事件的手指信息
- touchend時，touches與targetTouches信息會被刪除，changedTouches保存的最后一次的信息，最好用於計算手指信息
參數信息(changedTouches[0])
- clientX、clientY在顯示區的坐標
- target：當前元素
參考：https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent
winphone 8:
- MSPointerDown——當手指觸碰屏幕時候發生。不管當前有多少只手指
- MSPointerMove——當手指在屏幕上滑動時連續觸發。通常我們再滑屏頁面，會調用css的html{-ms-touch-action: none;}可以阻止默認情況的發生：阻止頁面滾動
- MSPointerUp——當手指離開屏幕時觸發
觸摸事件的響應順序
1、ontouchstart
2、ontouchmove
3、ontouchend
4、onclick
移動端click屏幕產生200-300 ms的延遲響應
移動設備上的web網頁是有300ms延遲的，玩玩會造成按鈕點擊延遲甚至是點擊失效。
蘋果發布首款iphone上ios系統搭載的safari為了將適用於PC端上大屏幕的網頁能比較好的展示在手機端上，使用了雙擊縮放(double tap to zoom)的方案，比如你在手機上用瀏覽器打開一個PC上的網頁，你可能在看到頁面內容雖然可以撐滿整個屏幕，但是字體、圖片都很小看不清，此時可以快速雙擊屏幕上的某一部分，你就能看清該部分放大后的內容，再次雙擊后能回到原始狀態。
雙擊縮放是指用手指在屏幕上快速點擊兩次，iOS 自帶的 Safari 瀏覽器會將網頁縮放至原始比例。
原因就出在瀏覽器需要如何判斷快速點擊上，當用戶在屏幕上單擊某一個元素時候，例如跳轉鏈接<a href="#"></a>，此處瀏覽器會先捕獲該次單擊，但瀏覽器不能決定用戶是單純要點擊鏈接還是要雙擊該部分區域進行縮放操作，所以，捕獲第一次單擊后，瀏覽器會先Hold一段時間touch，如果在touch時間區間里用戶未進行下一次點擊，則瀏覽器會做單擊跳轉鏈接的處理，如果touch時間里用戶進行了第二次單擊操作，則瀏覽器會禁止跳轉，轉而進行對該部分區域頁面的縮放操作。那么這個時間區間是有多少呢？
在IOS safari下，大概為300毫秒。這就是延遲的由來。造成的后果用戶純粹單擊頁面，頁面需要過一段時間才響應，給用戶慢體驗感覺，對於web開發者來說是，頁面js捕獲click事件的回調函數處理，需要300ms后才生效，也就間接導致影響其他業務邏輯的處理。
解決方案：
- fastclick可以解決在手機上點擊事件的300ms延遲
- zepto的touch模塊，tap事件也是為了解決在click的延遲問題
ios系統中元素被觸摸時產生的半透明灰色遮罩怎么去掉
ios用戶點擊一個鏈接，會出現一個半透明灰色遮罩, 如果想要禁用，可設置-webkit-tap-highlight-color的alpha值為0，也就是屬性值的最后一位設置為0就可以去除半透明灰色遮罩。
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}
部分android系統中元素被點擊時產生的邊框怎么去掉
android用戶點擊一個鏈接，會出現一個邊框或者半透明灰色遮罩, 不同生產商定義出來額效果不一樣，可設置-webkit-tap-highlight-color的alpha值為0去除部分機器自帶的效果。
a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0;)
-webkit-user-modify:read-write-plaintext-only;
}
-webkit-user-modify有個副作用，就是輸入法不再能夠輸入多個字符
另外，有些機型去除不了，如小米2
對於按鈕類還有個辦法，不使用a或者input標簽，直接用div標簽。
wp系統a、input標簽被點擊時產生的半透明灰色背景怎么去掉
<meta name="msapplication-tap-highlight" content="no">
--任何組織或個人分享、轉載本博客內容，請務必以鏈接方式注明出處：來自博客園--下雨天的太陽（http://www.cnblogs.com/doomjx/）--
--請勿以任何形式修改內容（包括文字和圖片）--