移動端touch與click

前段時間作項目中發現了點透現象，因此上網找了些資料，紀錄一下。

touch事件

touch是針對觸屏手機上的觸摸事件。
其中包括：touchstart,touchmove,touchend,touchcancel

• touchstart: 當手指觸摸到屏幕會觸發
• touchmove: 當手指在屏幕上移動時，會觸發
• touchend: 當手指離開屏幕時，會觸發

click

在手機WEB端，click會有 200~300 ms的延遲
在移動端，手指點擊一個元素，會通過：touchstart --> touchmove -> touchend --》click

點透

點透現象出現的場景

當A/B兩個層上下z軸重疊，上層的A點擊後消失或移開，而且B元素自己有默認click事件或綁定了click事件。在這種狀況下，點擊A/B重疊的部分，就會出現點透的現象。

解決方案

引入fastclick.js

阻止默認事件

event.preventDefault();

延遲click事件

setTimeout(function(){
    //......
},320);