最近在忙的專案是Vue的混合開發，因互動相對複雜，所以也踩了很多坑。在此做一下總結。

1.tap事件的實際應用

在使用tap事件時，老生常談的肯定是點透問題，大多情況下，在有滑屏互動的頁面時，我們會在根節點阻止預設行為以解決事件點透的bug。

阻止預設行為有優點，但也會相對帶來一些問題。

優點：

（1）解決事件點透

（2）解決IOS10+ safari 以及部分安卓瀏覽器 不在支援 viewport的最大縮放值和禁止縮放的問題

（3）解決IOS10+ safari下給body加overflow：hidden無效的問題 

給元素加了 一個絕對定位，但是元素本身沒有定位父級，元素如果超出了body的寬度，body 上的overflow對這個元素，不起效果
解決辦法：增加一個div作為根節點，並且新增相對定位和overflow:hidden

缺點：

（1）禁止mouse事件執行（也可以說成是優點，具體情況具體分析）

（2）阻止瀏覽器的自帶效果（左右滑動切換頁面，滾動回彈等）

（3）阻止觸發瀏覽器的滾動條

（4）阻止觸發瀏覽器系統選單

（5）阻止圖片文字被選中

（6）阻止input的輸入（在新開頁面進行輸入 eg.淘寶）

2.touchEvent相關變數

（1）touches 當前螢幕上的手指列表
（2）targetTouches 當前元素上的手指列表
（3）changedTouches 觸發當前事件的手指列表
（4）clientX 和 clientY 手指相對於可視區的座標
（5）pageX 和 pageY 手指相對於頁面的座標

3.tap事件封裝要點

（1）touchend時確定最大距離，大於此距離無效

（2）確定從touchstart到touchend的時間間隔，大於此事件間隔無效

（3）嚴格意義上講，touchmove時也應該有最大距離限制（手指在某元素上點選後繞了一大圈再回到當前元素不應觸發tap事件）

（4）需要考慮tap事件對click的影響

未完待續。。。