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

 

posted @ 2016-12-22 18:23  萧了个晓  阅读(27838)  评论(0编辑  收藏  举报