移动端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)
})