1 为什么会发生延迟300毫秒的问题

移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件,才有了FastClick。这个问题在较新的安卓机上已经没有了,但是在ios一样恶心的存在。为什么不用touchend?举个一个例子 当存在一个滑动列表,而列表中的元素又可以点击的时候,你就知道有多爽了.

言归正传,其实fastclick的使用很简单,都是创建fastclick实列后,将其包裹目标dom。然后目标dom及dom内的元素就都会处理click事件,这一步具体原理可以有兴趣的同学可以点击这个链接去了解,在此就不多讲,下面举例,几种fastclick的使用

vue

1.下载fastclick

npm install fastclick

2.在main.js上引入fastclick

//main.js
import fastclick from 'fastclick'
fastclick.attach(document.body)

react

1.下载fastclick

npm install --save-dev react-fastclick-alt

2.将元素或者component放在  <FastClick>...</FastClick> 中

import React from 'react';
import FastClick from 'react-fastclick-alt';
import ReactDOM from 'react-dom';
ReactDOM.render(<FastClick><MyApp/></FastClick>, document.getElementById('app'));

html

1.下载好之后直接引入

<script type='application/javascript' src='/path/to/fastclick.js'></script>

2.在dom初始化后使用

if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}

如果在使用fastclick 的同时,我有使了一些插件,在这个插件又依赖与元素的默认事件如clipboard.js那么我们该如何去处理呢?

可以使用这个 needsclick 在元素上使用这个类 可以使元素不使用fastclick来处理单击事件

<a class="needsclick">Ignored by FastClick</a>

解决在移动端上 click事件延迟300 毫秒的问题 fastclick.js的更多相关文章

  1. 移动端的click事件延迟触发的原理是什么?如何解决这个问题?

    移动端的click事件延迟触发的原理是什么?如何解决这个问题? 原理 :移动端屏幕双击会缩放页面 300ms延迟 会出现点透现象 在列表页面上创建一个弹出层,弹出层有个关闭的按钮,你点了这个按钮关闭弹 ...

  2. 移动端click事件延迟300ms的原因以及解决办法

    这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...

  3. 移动端click事件延迟300ms的原因以及解决办法[转载]

    原文:http://www.bubuko.com/infodetail-822565.html 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为 ...

  4. 关于移动端的Click事件

    在移动端执行Click事件,通常情况出现有300毫秒的延迟,为防止这种不必要的延迟效果,我们可以换种方式来实现,同样达到快速执行Click事件的效果. 先了解一下移动端Click的执行顺序: touc ...

  5. iphone上click事件不触发的问题解决。

    iphone上click事件不触发的问题解决. //在ID为jsProvince上有这么一个事件: $('body').on('click', '#jsProvince', function(e){ ...

  6. 移动端click事件延迟300ms到底是怎么回事,该如何解决?

    不管在移动端还是PC端,我们都需要处理用户点击,这个最常用的事件.但在touch端click事件响应速度会比较慢,在较老的手机设备上会更为明显(300ms的延迟). 问题由来 这要追溯至 2007 年 ...

  7. 苹果浏览器移动端click事件延迟300ms的原因以及解决办法

    这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...

  8. 移动端的传统click事件延迟和点透现象

    一.场景描述: 1.A/B两个层上下z轴重叠. 2.上层的A点击后消失或移开.(这一点很重要) 3.B元素本身有默认click事件(如a标签) 或 B绑定了click事件. 在以上情况下,点击A/B重 ...

  9. 移动端click事件延迟300ms问题

    因为历史原因,移动端点击事件会有300ms延迟,来判断用户是连续双击缩放还是点击跳转.即如果300ms内连续点击两次,则会理解为对页面进行缩放操作(当然前提是移动端页面设置为可缩放的):在一次点击之后 ...

随机推荐

  1. 【教程】虚拟机安装CentOS 7 ping不通百度/并且使用Xshell 连接

    最近需要在电脑虚拟机上安装CentOS 7 ,之前对虚拟机并不熟悉,捅咕了两天时间,如果终于安装成功. 之前遇到的坑:安装完CentOS 7 之后一直ping 不通www.baidu.com 网上查询 ...

  2. vCenter 6.0 vsca 安装遇到的一些小问题

    在安装vCenter 6.0 vsca的时候,安装插件到第二个的时候,会报出一个windows installer的错误.需要联系软件管理员或者技术支持的一个error. 经过多次的测试,我终于找到了 ...

  3. linux挂载群辉的NFS共享文件夹

    mount -t nfs 192.168.137.136:/volume1/NFSfile /NFSfile -o proto=tcp -o nolock  df -h   #查看挂载点    

  4. Ubuntu系统管理systemd

    systemctl命令 systemctl list-units - 列出所有jobs/serviceList all units (where unit is the term for a job/ ...

  5. 【JZOJ3673】【luoguP4040】【BZOJ3874】宅男计划

    description 外卖店一共有N种食物,分别有1到N编号.第i种食物有固定的价钱Pi和保质期Si.第i种食物会在Si天后过期.JYY是不会吃过期食物的. 比如JYY如果今天点了一份保质期为1天的 ...

  6. 以字符集为位数的字符串hash——上海网络赛G

    先预处理一个hash[a][b]:开头字符为a, 结尾字符是b,中间的字符hash值为hs的的hash表,保存的是出现次数 对于一个子串求hash值的策略:设hash值是个26位的数,每新增一个字符, ...

  7. Tomcat启动报:The Server time zone value 'XXXXX' 乱码问题解决

    今天给自己项目打包到服务器发布时,运行时,发现报 java.sql.SQLException: The server time zone value '�й���׼ʱ��' is unrecogniz ...

  8. JDK的下载及安装

    JDK下载及安装 JDK的下载 官网下载 点击进入之后,显示的是当前版本最新的,点击downloads,选择适合自己电脑的版本下载 下载历史版本要一直往下拉,找到如图: 点击之后会显示以往的版本 环境 ...

  9. 31. Flexible static memory controller (FSMC)

    31.1 FSMC main features FSMC块能够与同步和异步内存和16位PC存储卡.其主要目的是: 将AHB事务转换为适当的外部设备协议 满足外部设备的访问定时要求 所有外部存储器与控制 ...

  10. HDU 6651 Final Exam (思维)

    2019 杭电多校 7 1006 题目链接:HDU 6651 比赛链接:2019 Multi-University Training Contest 7 Problem Description Fin ...