1. ?touch 事件的來歷

2007 蘋果推出iphone，瀏覽器網(wǎng)頁在iphone上顯示時字體特別小，根本看不清楚

蘋果的解決方案：

方案一：雙指進行縮放

方案二：在屏幕上雙擊進行放大（單擊300ms后，再單擊才算雙擊），造成了，移動端點擊事件，300ms 延遲的問題

解決方案，就是使用touch事件來替代

移動端新增touch事件?--- 只能使用現(xiàn)代事件進行添加

????touchstart:? 觸摸開始

????touchmove:?觸摸移動

????touchend:?觸摸結(jié)束?

????touchcancel：touch 取消，如來電等

【擴展】：移動端touch、click、tap的區(qū)別

http://t.zoukankan.com/luo1240465012-p-9450627.html

2. 添加touch 事件

代碼如下：

3. touch對象

注：touchstart 觸摸開始后，不管touchmove , touchend 是否移出開始觸摸的元素，e.target都是開始時觸摸的元素dom.

e.touches : 在手機上的所有觸點信息

e.changeTouches: 跟當前事件相關(guān)的所有觸點信息

e.targetTouches：作用在當前元素上的所有觸點信息

【擴展】touch事件中的touches、targetTouches和changedTouches詳解

https://www.cnblogs.com/mengff/p/6005516.html

4. 封裝 touch 事件

事件測試：

5. touch?事件的穿透

因click是在touch系列事件發(fā)生后300ms才觸發(fā)的，混用click和touch肯定會導致穿透問題.

點擊穿透現(xiàn)象的情況：

1) 蒙層問題

蒙層的關(guān)閉按鈕綁定的是touch事件，而按鈕下面元素綁定的是click事件，touch事件觸發(fā)后，蒙層消失，300ms后這個點的click事件觸發(fā)。

2) 跨頁面點擊穿透問題

如果按鈕下面恰好是一個href屬性的a標簽，那么頁面就會發(fā)生跳轉(zhuǎn)（a標簽跳轉(zhuǎn)默認是click事件觸發(fā)的）

解決問題：

方法一：自己封裝tap事件不會有穿透問題，因為阻止了默認行為??e.preventDefault();

方法二：吃掉touch之后的click,?使用計時器，讓touch后延遲350ms再隱藏蒙層

方法三：使用fastclick.js；可以直接寫click事件

還有，其它方法，就不闡述了

茍有恒?,?何必三更眠五更起

關(guān)注我，一起學習吧