《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上面测试的这个问题,并未发现安卓系统会存在延迟、连选不中的问题;

推荐使用第一种解决方案

原文地址:https://www.cnblogs.com/chensv/p/10063987.html