您现在的位置是:首页 > 正文

Web-api学习 15:click 延时解决方案

2024-02-29 15:31:33阅读 0

移动端 click 事件会有 300ms 的延时,原因是移动端屏幕双击会缩放(double tap to zoom) 页面。

解决方案:

1. 禁用缩放。

浏览器禁用默认的双击缩放行为并且去掉300ms 的点击延迟。

 <meta name="viewport" content="user-scalable=no">

 2.利用touch事件自己封装这个事件解决300ms 延迟。

原理就是:

  1. 当我们手指触摸屏幕,记录当前触摸时间

  2. 当我们手指离开屏幕, 用离开的时间减去触摸的时间

  3. 如果时间小于150ms,并且没有滑动过屏幕, 那么我们就定义为点击

代码如下:

//封装tap,解决click 300ms 延时
function tap (obj, callback) {
        var isMove = false;
        var startTime = 0; // 记录触摸时候的时间变量
        obj.addEventListener('touchstart', function (e) {
            startTime = Date.now(); // 记录触摸时间
        });
        obj.addEventListener('touchmove', function (e) {
            isMove = true;  // 看看是否有滑动,有滑动算拖拽,不算点击
        });
        obj.addEventListener('touchend', function (e) {
            if (!isMove && (Date.now() - startTime) < 150) {  // 如果手指触摸和离开时间小于150ms 算点击
                callback && callback(); // 执行回调函数
            }
            isMove = false;  //  取反 重置
            startTime = 0;
        });
}
//调用  
  tap(div, function(){   // 执行代码  });

3.使用插件。fastclick 插件解决300ms 延迟。  

链接:https://pan.baidu.com/s/1T8IjrafU-dx3KGNw0Zf9eg 
提取码:ri2p

网站文章

  • 使用C++的函数memset()时要注意它的操作对象是每一个字节

    使用C++的函数memset()时要注意它的操作对象是每一个字节

    函数memset()的作用是将某一块内存中的内容按字节全部设置为指定的值, 这个函数通常为新申请的内存做初始化工作。函数memset()的介绍大家可参见百度百科,写得很清楚了,百度百科链接如下: ht...

    2024-02-29 15:31:04
  • 概述 .NET 6 ThreadPool 实现

    概述 .NET 6 ThreadPool 实现

    前言在即将发布的 .NET 6 runtime 中,默认的线程池实现从 C++ 代码改为了 C#,更方便我们学习线程池的设计了。https://github.com/dotnet/runtime/tr...

    2024-02-29 15:30:58
  • Yuchang and Zixiang ‘s maze(BFS)

    题目链接:#include&lt;cstdio&gt;#include&lt;iostream&gt;#include&lt;cstring&gt;#include&lt;algorithm&gt;#include&lt;vector&gt;#include&lt;queue&gt;#include&lt;stack&gt;using namespace std;#defin

    2024-02-29 15:30:51
  • 一文读懂物联网、云计算与大数据的关系

    一文读懂物联网、云计算与大数据的关系

    ARM是微处理器行业的一家知名企业,设计了大量高性能、廉价、耗能低的RISC处理器、相关技术及软件。技术具有性能高、成本低和能耗省的特点。适用于多种领域,比如嵌入控制、消费/教育类多媒体、DSP和移动式应用等。ARM公司是专门从事基于RISC技术芯片设计开发的公司,作为知识产权供应商,本身不直接从事芯片生产,而是转让设计许可,由合作公司生产各具特色的芯片...

    2024-02-29 15:30:24
  • 系统分析师选择题笔记

    系统分析师选择题笔记

    目录分值:4分中国公民、法人或者其他组织的作品,不论是否发表,都享有著作权。开发软件所用的思想、处理过程、操作方法或者数学概念不受保护软件作品并不是指代码,而是指带有特定业务逻辑的程序以及软件文档★著作权法不适用于下列情形:法律、法规,国家机关的决议、决定、命令和其他具有立法、行政、司法性质的文件,及其官方正式译文;时事新闻;历法、通用数表、通用表格和公式。分值:1分

    2024-02-29 15:30:16
  • 反调试与反反调试学习·1(挖坑)

    文章目录个人理解静态反调试PEBTEB原始API攻击调试器打开进程检查TLS回调函数使用普通API动态反调试使用SEH时间检查单步检查补丁检查反反汇编偷取代码分页保护壳虚拟机 个人理解   2019....

    2024-02-29 15:30:07
  • 顺丰面试,第二个问题把我劝退了!

    你好,我是田哥本文主人翁是我星球里一位同学,周一线上顺丰面试遇到的问题,反馈面经时,只记得部分的。本来约的三点的面试,但是面试官提前上线看到我在线就说提前开始吧。先看问题 自我介绍说一个你认为有挑战的...

    2024-02-29 15:30:00
  • 程序员是怎么约会的?

    程序员是怎么约会的?

    程序员? 在多数心目印象当中,程序员大多数是宅男。程序员的世界是由代码构建的,代码之外还是代码。 程序员的世界是:格子衫,牛仔裤,其实,在程序员眼里衣服就是块布,避体不贵,经济实惠。省下的钱用来买个一...

    2024-02-29 15:29:31
  • 分布式设计原则

    分布式设计原则

    1、CAP理论2000年Eric Brewer教授提出了著名的CAP理论,即:一个分布式系统不可能满足一致性,可用性和分区容错性这三个需求,最多只能同时满足两个。2002年MIT的Seth Gilbert 和 Nancy lynch两人证明了CAP理论的正确性。根据CAP理论,一致性(C),可用性(A),分区容错性(P),三者不可兼得,必须有所取舍。因此系统架构师不要把精力浪费在如何设

    2024-02-29 15:29:23
  • Silverlight/Windows8/WPF/WP7/HTML5周学习导读(8月27日-9月2日)

    Silverlight/Windows8/WPF/WP7/HTML5周学习导读(8月27日-9月2日)

    Silverlight/Windows8/WPF/WP7/HTML5周学习导读(8月27日-9月2日)本周Silverlight学习资源更新Silverlight 3D 投射mypc2010Silverlight RIA Service部署到IIS6的步骤或问题边缘程序员2011Silverlight找到模板中的子控件sb001Silverlight中读取Word边缘程序员2011基于Silver

    2024-02-29 15:29:15