zoukankan      html  css  js  c++  java
  • FastClick

    处理移动端click事件300毫秒延迟。FastClick 是一个简单,易于使用的js库用于消除在移动浏览器上触发click事件与一个物理Tap(敲击)之间的300延迟。

    1、为什么会延迟?

    从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间。为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作。
        在手持设备的浏览器上(本处主要指代iOS和Android系统上的webkit内核的浏览器和嵌入在应用程序里面的webview),由于两次连续“轻触”是“放大”的操作(即使你两次轻触的是一个链接或一个有click事件监听器的元素),所以在第一次被“轻触”后,浏览器需要先等一段时间,看看有没有所谓的“连续的第二次轻触”。如果有,则进行“放大”操作。没有,才敢放心地认为用户不是要放大,而是需要“click”至此才敢触发click事件,导致“短按(手指接触屏幕到离开屏幕的时间比较短)”的click事件通常约会延迟300ms左右。
    

    2、兼容性

    Mobile Safari on iOS 3 and upwards
    Chrome on iOS 5 and upwards
    Chrome on Android (ICS)
    Opera Mobile 11.5 and upwards
    Android Browser since Android 2
    PlayBook OS 1 and upwards
    

    3、不应用 FastClick 的场景

    1)桌面浏览器;
    2)如果 viewport meta 标签 中设置了 width=device-width, Android 上的 Chrome 32+ 会禁用 300ms 延时;
    3)viewport meta 标签如果设置了 user-scalable=no,Android 上的 Chrome(所有版本)都会禁用 300ms 延迟。这样就无法让用户多点触控缩放网页了
    4)IE10 中,可以使用 css 属性 -ms-touch-action: none 禁止元素双击缩放.
    

    4、使用方法

    TODO: 修改使用接口
    
    window.addEventListener('load', function() {
      FastClick.attach(document.body);
    }, false);
    
    Zepto.js:
    

    $(function() {
    FastClick.attach(document.body);
    });
    Copy
    var attachFastClick = require('fastclick');
    attachFastClick(document.body);

    引入插件的JavaScript文件到你的HTML网页中,
    

    <script type='application/javascript' src='/path/to/fastclick.js'></script>
    if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
    FastClick.attach(document.body);
    }, false);
    }
    如果使用了jQuery插件,
    $(function() {
    FastClick.attach(document.body);
    });

    如果你使用的browserify CommonJS的模块系统或另一种风格,其fastclick.attach函数将返回 require(‘fastclick’) 。作为一个结果,使用fastclick这些装载机的最简单的方法如下:
    

    var attachFastClick = require('fastclick');
    attachFastClick(document.body);

  • 相关阅读:
    javascript:属性的操作
    javascript:Element 节点
    javascript:ParentNode 接口,ChildNode 接口
    javascript:NodeList 接口,HTMLCollection 接口
    javascript:Node接口
    javascript:DOM概述
    javascript:Promise 对象
    javascript:定时器
    javascript:异步操作概述
    javascript:严格模式
  • 原文地址:https://www.cnblogs.com/Juphy/p/7020049.html
Copyright © 2011-2022 走看看