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

    推荐使用第一种解决方案

  • 相关阅读:
    设计模式-创建型-原型模式
    设计模式-创建型-抽象工厂模式
    设计模式-创建型-工厂模式
    设计模式-创建型-单例模式
    css3技巧属性之text-overflow
    bootstrap如何自定义5等分
    LeetCode-64-最小路径和
    LeetCode-62-不同路径
    LeetCode-5-最长回文子串
    LeetCode-98-验证二叉搜索树
  • 原文地址:https://www.cnblogs.com/chensv/p/10063987.html
Copyright © 2011-2022 走看看