解決移動端touch事件（touchstart／touchend） 的穿透問題

情景：

我們在移動端點擊事件click對比touchend會有很明顯的300ms的延遲，為啥？

瀏覽器在 click 后會等待約300ms去判斷用戶是否有雙擊行為（手機需要知道你是不是想雙擊放大網頁內容）。

如果300ms內沒有再一次click，那么就判定這是一次單機行為。所以我們基本上都用（touchstart／touchend）。

但是這些事件在執行完之后還會執行一次click事件（具體原因解釋起來太麻煩了，這要從JS事件監聽機制的根本的講起。。。其實我也了解有限。。）

 

解決：

解決方案一：e.preventDefault()

沒錯就是這個大家熟悉到爛的方法，我也是寫來寫去死馬活馬的用，在ios上效果很不錯，完美解決穿透點擊問題，andirod上效果不好（所以有了下面的方法）。

 

 

解決方案二：利用pointer-events 這個方法

 

<div class="up-overlay"></div>
<div class="under-overlay"></div>
<div class="button"></div>

 

$('.button').on('touchstart',function(){

　　$('.up-overlay').hide();
　　$('.under-overlay').hide();

　　//馬上讓它不能點擊
　　$('.under-overlay').css('pointer-events','none');

　　//因為click事件需要300ms響應，所以我們時間定義350ms,時間一過又可以正常點擊了
　　setTimeout(function(){$('.under-overlay').css('pointer-events','all')},350)
})