《H5 App开发》移动端IOS click 事件响应缓慢的解决方案

造成点击缓慢的原因

从点击屏幕上的元素到触发元素的 click 事件，移动浏览器会有大约 300 毫秒的等待时间。为什么这么设计呢？ 因为它想看看你是不是要进行双击（double tap）操作。

 

第一种解决方案：

使用js框架fastclick, 处理移动端 click 事件 300 毫秒延迟， 由 FT Labs 开发，Github 项目地址：https://github.com/ftlabs/fastclick

在页面直接引入fastclick.js

<script type='application/javascript' src='/path/to/fastclick.js'></script>

 原生js使用方法：

window.addEventListener('load', function() {
  FastClick.attach(document.body);
}, false);

环境内有jquery的情况下，使用方法：

$(function() {
  FastClick.attach(document.body);
});

 

第二种解决方案：

第二种解决方案是将click事件替换为touchstart事件

$(document).on("touchstart",".farmGoods",function(){
     alert('111');
 });

 

这两个解决方案的差异：

1.第一种方案在ios上面还是会存在有点延迟的问题，但是能解决连续点击没反应的问题，上下滑动滚动条不会选中事件

2.第二种方案在ios上面不会存在延迟的问题，但是上下滑动滚动条会选中手指接触的第一个元素

 

ps:这里博主只是在ios App上面测试的这个问题，并未发现安卓系统会存在延迟、连选不中的问题；

推荐使用第一种解决方案