fastclick:处理移动端click事件300毫秒延迟

1、兼容性

  • iOS 3及更高版本的移动Safari
  • iOS 5及更高版本的Chrome
  • Android上的Chrome(ICS)
  • Opera Mobile 11.5及以上版本
  • Android 2以来的Android浏览器
  • PlayBook OS 1及以上版本

2、不应用FastClick的场景

桌面浏览器; 
如果视口元标签中设置了width=device-width,Android上的Chrome 32+会禁用300ms延时;

<meta name="viewport" content="width=device-width, initial-scale=1">

视频元标签如果设置了user-scalable=no,Android上的Chrome(所有版本)都会禁用300ms延迟。 
IE10中,可以使用css属性-ms-touch-action: none禁止元素双击缩放(参考文章)。

3、安装:

先执行安装fastclick的命令。

npm install fastclick -S

之后,在main.js中引入,并绑定到body

import FastClick from 'fastclick'

FastClick.attach(document.body);

vue.js 添加 fastclick的支持的更多相关文章

  1. vue.js 添加 fastclick的支持 处理移动端click事件300毫秒延迟

    fastclick:处理移动端click事件300毫秒延迟. 1,先执行安装fastclick的命令 npm install fastclick 2,在main.js中引入,并绑定到body. imp ...

  2. Vue.js 添加组件

    <!DOCTYPE HTML> <html> <head> <title>vue.js hello world</title> <sc ...

  3. vue 添加 fastclick的支持

    fastclick:处理移动端click事件300毫秒延迟 1.兼容性iOS 3及更高版本的移动SafariiOS 5及更高版本的ChromeAndroid上的Chrome(ICS)Opera Mob ...

  4. Vue.js的后端数据支持:使用Express建立app, 并使用MongoDB数据库。

    需要用到的backed tech stack: Node: JavaScript on the server/backend. That's basically what it is, but mor ...

  5. vue.js 微信浏览器不支持lambda表达式

    最近尝试在用vue重构一个微信网页,然后发现在本地测试是可以的,在微信测试工具里也是正常的,然后在手机里有人正常有人不正常,后来发现规律,微信比较新的是不支持的,微信比较旧的是不支持的.然后网上谷歌了 ...

  6. 为Vue.js添加友好日志

    const isDebugEnabled = process.env.NODE_ENV !== "production"; const isInfoEnabled = true; ...

  7. Vue.js学习 Item4 -- 数据双向绑定

    Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue 模板因而从根本上不同于基于字符串的模板,请记住这点. ...

  8. Vue.js 数据绑定语法详解

    Vue.js 数据绑定语法详解 一.总结 一句话总结:Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue ...

  9. 一、Vue.js介绍

    一.介绍 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手 ...

随机推荐

  1. 002_关于six版本过低报cannot import name urllib_parse的问题

    一. 参考:https://github.com/Parsely/pykafka/issues/222 [root@jyall.com tmp]#python check.py #报错如下 Trace ...

  2. Python框架学习之Flask中的Jinja2模板

    前面也提到过在Flask中最核心的两个组件是Werkzeug和Jinja2模板.其中Werkzeug在前一节已经详细说明了.现在这一节主要是来谈谈Jinja2模板. 一.为什么需要引入模板: 在进行软 ...

  3. gcc 找不到 boot python 链接库的问题: /usr/bin/ld: cannot find -lboost_python

    问题: Ubuntu 14.04,gcc 4.8.4,以默认方式编译 boost 1.67 后,使用 Boost.Python 时,gcc 提示找不到 boost python 链接库. 方案: 查看 ...

  4. js截取url参数

    举例说明,比如http://localhost:2019/blog/getCommentListInfo?postId=1如何获取postId=1这个参数值呢?很简单通过下面代码即可获取,如: win ...

  5. 爬虫之selenium模拟点击

    在利用爬虫爬取页面HTML信息得时候有的当你运用request方法爬取时爬下来得HTML信息和网站信息不相符,这也导致以后得爬去无法进行,这也是反扒机制之一,解决办法时利用代码进行模拟网页点击,来爬去 ...

  6. Leetcode 1. Two Sum (Python)

    refer to https://blog.csdn.net/linfeng886/article/details/79772348 Description Given an array of int ...

  7. AI numpy

    nan:not a number inf:infinate arange(start, stop, step):[start, stop),step是步长的数组 sin:正弦函数 cos:余弦函数

  8. 给ubuntu换内核

    本文为原创,转载请注明:http://www.cnblogs.com/tolimit/ 下载内核源码 有两种方式,一种方式是直接从官网:https://www.kernel.org/直接下载,另一种方 ...

  9. ESP8266开发综合篇第十四节(LUA)-8266作为TCP服务器,Android客户端连接,显示温湿度,控制继电器

    前几节先略过,我先补充上大部分人迫切的需求 编写Android TCP客户端  用Android Studio 先做一下界面 然后放一个输入对话框,因为没有显示出来这个控件.所以就手写 剩下的自己研究 ...

  10. Spring MVC 5 + Thymeleaf 基于Java配置和注解配置

    Spring MVC 5 + Thymeleaf 注解配置 Spring的配置方式一般为两种:XML配置和注解配置 Spring从3.0开始以后,推荐使用注解配置,这两种配置的优缺点说的人很多,我就不 ...