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. 16.ajax_case04

    # 抓取金色财经快讯接口 # https://www.jinse.com/lives import requests import json header = { 'Accept': 'text/ht ...

  2. centos7下kubernetes(4.kubernetes组件)

    Kubenetes cluster 由master和node组成 Master是kubenetes的大脑.运行着以下进程:kube-apiserver.kube-scheduler.kube-cont ...

  3. 在Ubuntu18.04上使用Anaconda(python3.7)环境中安装tensorflow1.13.1

    由于清华镜像源迟迟没有更新tensorflow1.13.1导致python3.7不能使用tensorflow 这里有一个解决方法 管理员模式打开(一定要管理员模式 不然会导致权限不足) 输入 pip ...

  4. javascript中数组化的一般见解

    javascript中数组化的一般见解,数组化浏览器中存在许多类数组对象,往往对类数组操作比较麻烦,没有数组那些非常方便的方法,在这种情况下,就有了数组化方法. 数组化的一般方法 1.第一种也是我们最 ...

  5. Python-wxpy信息爬取发送至微信(小白级)

    Wxpy初体验 1.1 安装wxpy 在这里默认大家以及安装好了pip,我们需要安装wxpy 以及wechat_sender 两个包,这里推荐使用国内的豆瓣源,如果大家网速过硬 请忽略.. 1 2 p ...

  6. 4-cookie 简介

    1.eclipse中tomcate镜像位置:D:\javaTools\eclipse\workspace\.metadata\.plugins\org.eclipse.wst.server.core\ ...

  7. WiFi-ESP8266入门http(3-4)网页一键配网(1若为普通wifi直连 2若为西电网页认证自动网页post请求连接)+网页按钮灯控+MQTT通信

    网页一键配网(1若为普通wifi直连  2若为西电网页认证自动网页post请求连接)+网页按钮灯控+MQTT通信 工程连接:https://github.com/Dongvdong/ESP8266_H ...

  8. pytorch例子学习——TRANSFER LEARNING TUTORIAL

    参考:https://pytorch.org/tutorials/beginner/transfer_learning_tutorial.html 以下是两种主要的迁移学习场景 微调convnet : ...

  9. Linux中查看你的用户是否为root用户

    可以使用sudo -l命令: user@fafsf:/opt/user$ sudo -l [sudo] password for user: //这里是要输入你的密码 Sorry, user user ...

  10. PyCharm 中使用 Pylint 控制代码质量

    1) Pylint安装 - Windows下: 直接在 cmd 下使用 pip install pylint 即可(如果 pip 不可用,首先安装最新版 Python,会默认安装 pip,或者找到 p ...