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

標籤：事件   button   overlay   不能   inter   star   需要   div   timeout   

解決：

解決方案一：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)
})

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