zoukankan      html  css  js  c++  java
  • fastclick 的使用

    fastclick使用

    1. 为什么需要使用?

    移动浏览器有300毫秒的等待时间,这与双击缩放(在屏幕上快速点击两次)的方案有关。浏览器捕获第一次单击后,会先等待一段时间,如果在这段时间区间里用户未进行下一次点击,则浏览器会做单击事件的处理。如果这段时间里用户进行了第二次单击操作,则浏览器会做双击事件处理。这段时间就是上面提到的300毫秒延迟。

    2. 解决方案

    有几种解决方案,各有优缺点,下面只说其中两种

    2.1 禁用缩放 
        <meta name="viewport" content="width=device-width user-scalable= 'no'">
    2.2 使用fastclick.js
         原理: 在检测到touchend事件的时候,会通过DOM自定义事件立即出发模拟一个click事件,并把浏览器在300ms之后真正的click事件阻止掉
    
        // 引入
       <script type='application/javascript' src='/path/to/fastclick.js'></script>
        // 使用了jquery的时候
        $(function() {
            FastClick.attach(document.body);
        });
    
        // 没使用jquery的时候
        if ('addEventListener' in document) {
            document.addEventListener('DOMContentLoaded', function() {
                FastClick.attach(document.body);
            }, false);
        }
    
    
        在vue中使用
        // 安装
        npm install fastclick -S
    
        // 引入
        import FastClick from 'fastclick'
    
        // 使用
        FastClick.attach(document.body);

    3. 具体使用

  • 相关阅读:
    BZOJ2762: [JLOI2011]不等式组
    BZOJ1452: [JSOI2009]Count
    Codeforces Round #441 (Div. 2, by Moscow Team Olympiad)
    BZOJ1635: [Usaco2007 Jan]Tallest Cow 最高的牛
    BZOJ2730: [HNOI2012]矿场搭建
    Flask实现异步非阻塞请求功能
    在flask中使用websocket-实时消息推送
    Python数据库连接池DBUtils
    flask请求上下文
    scanf与getchar
  • 原文地址:https://www.cnblogs.com/zzxuan/p/10617811.html
Copyright © 2011-2022 走看看