fastclick

移动端触摸、点击事件优化（fastclick源码学习） 最近在做一些微信移动端的页面，在此记录关于移动端触摸和点击事件的学习优化过程，主要内容围绕fastclick展开。 fastclick github 问题起源 移动端浏览器一般在用户点击屏幕之后会延迟大约300ms才触发click event —— GOOGLE 手机打开此链接查看延迟demo （现在许多浏览器已经不存在延迟问题了，详见fastclick github，但笔者的手机浏览器还是出现了三百毫秒延迟的问题） 截图如下 为什么会300ms延迟呢，主要是有一个双击缩放功能，浏览器需要判断用户点击是否为双击缩放。这个问题不解决， 1、用户体验就会很差，很不流畅，尤其是在密集操作场景下，比如计算器,不解决300ms延迟问题，感觉反应很慢； 2、点击穿透问题 事件触发顺序 在了解fastclick的思路之前，我们先看一下事件触发顺序是怎样的 touchstart touchmove touchend mouseover ：当指针设备移动到存在监听器的元素或其子元素的时候，mouseover事件就会被触发。 mouseenter：当指针设备( 通常指鼠标 )在元素上移动时, mousemove 事件被触发。 mousedown click 移动端click有300ms延迟问题，touch可没有哦。 fastclick思路

移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件，这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件，才有了FastClick。 >npm install fastclick --save main.js import fastClick from 'fastclick' FastClick.attach(document.body) 来源： https://www.cnblogs.com/Harold-Hua/p/11778533.html

1. <meta>补充 1 < head > 2 < meta charset ="utf-8" > 3 < meta name ="viewport" content ="width=device-width,initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" > 4 < title > my-project </ title > 5 </ head > 2. 添加reset.css：重置页面样式表 3.添加border.css：1px物理边框的实现 在main.js入口文件中添加 1 import Vue from ‘vue‘ 2 import App from ‘./App‘ // 当前目录下（src）的App的位置导入进来的 3 import router from ‘./router‘ // 自动引用router文件夹下的index.js文件 4 import fastClick from ‘fastclick‘ 5 import ‘./assets/styles/reset.css‘ 6 import ‘./assets/styles/border.css‘ 4.引入fastclick库：解决移动端300毫秒点击延迟 把fastclick这个包安装到项目的依赖之中，-

一、引入fastclick.js 1.使用scripot标签引入，可以从cdn引入，也可以将fastclick.js下载到本地放到项目中，然后再引入。 2.使用webpack等构建工具的项目，需要先安装fastclick包 $ npm i fastclick -S 然后在项目的入口文件中引入fastclick import FastClick from 'fastclick' 二、在项目中使用 经过第一步，我们已经在项目中引入了fastclick.js，然后我们来使用它 FastClick.attach(document.body) 这就解决了移动端浏览器点击延迟的问题。 为什么移动端浏览器会有点击延迟的问题？请自行百度。 解决点击延迟的问题还有没有其他方法？有，但是在这里我不告诉你。 文章来源: 使用fastclick解决移动端点击延迟

原文链接： http://www.3mooc.com/front/articleinfo/97 项目概要 本项目用到的技术栈： vue-cli + vue-router + vuex + axios 如何在本地运行本项目 git clone https://gitee.com/ehcto/vuecli3_rangers.git cd vuecli3_rangers npm i 或 cnpm i npm run serve 项目文档说明 ├―― node_modules/ #模块文件 ├―― src/ #项目入口目录 ├―― assets/ #前端资源目录 ├―― components/ # vue组件目录/.vue文件存放目录 ├―― router/ # vue路由管理目录 ├―― store/ # vuex状态管理目录 ├―― App.vue # 项目根组件 ├―― main.js # 项目入口文件 ├―― test/ #测试目录 ├―― package.json #包文件信息 ├―― .babelrc ├―― README.md 功能简单介绍 main.js import Vue from ‘vue’ import App from ‘./App.vue’ import router from ‘./router’ import store from ‘./store’ /

移动端兼容性问题解决方案 转 https://www.cnblogs.com/wu-web/p/7866963.html 1. IOS移动端click事件300ms的延迟响应 移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。这是由于区分单击事件和双击屏幕缩放的历史原因造成的, 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，比如你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然可以撑满整个屏幕，但是字体、图片都很小看不清，此时可以快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态。 双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。 原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接<a href="#"></a>，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作，所以，捕获第一次单击后，浏览器会先Hold一段时间t，如果在t时间区间里用户未进行下一次点击，则浏览器会做单击跳转链接的处理，如果t时间里用户进行了第二次单击操作

混合开发过程中，iOS引用前端界面之后，界面点击会默认产生一个300毫秒的延时效果，为了解决这个问题，引入fastClick，但是当界面引入fastClick之后，会产生输入框点击无法获取焦点问题，只有双击或者长按的时候才能使input输入框获取到焦点，该问题是由于引入fastClick导致的，解决方案如下： FastClick.prototype.focus = function(targetElement) { var length; // Issue #160: on iOS 7, some input elements (e.g. date datetime month) throw a vague TypeError on setSelectionRange. These elements don't have an integer value for the selectionStart and selectionEnd properties, but unfortunately that can't be used for detection because accessing the properties also throws a TypeError. Just check the type instead. Filed as Apple bug

在vue项目中有时会有移动端300毫秒事件点击延迟问题，需要 安装fastclick库 来解决 1.打开Vue项目，选中项目，按住shift并单记右键，选择【在此处打开powershell窗口（s）】,输入命令： cnpm install fastclick --save 如果安装淘宝镜像使用 cnpm install fastclick --save，如果没有安装则使用 npm install fastclick --save 2.在项目main.js文件夹，引入fastclick import fastClick from 'fastclick' fastClick.attach(document.body) //将fastclick自带的方法绑定到document.body之上 这样就可以正确引入fastclick库，解决300毫秒点击延迟问题~ 来源： http://www.cnblogs.com/qdkfyym/p/11447189.html

原文地址： What Exactly Is..... The 300ms Click Delay 快速响应是所有 UI 实现的重中之重。研究表明，当 延迟超过 100 毫秒 ，用户就能感受到界面的卡顿。 然而，出于对手指触摸滑动的区分，移动端页面对于触摸事件会有 300 毫秒的延迟，导致多数用户感觉移动设备上基于 HTML 的 web 应用界面响应速度慢。 本文主要讨论上述延时的来历，浏览器生产商的考虑，以及我们作为开发者，当前应该如何处理这个问题。 300 毫秒延迟的来历 这要追溯至 2007 年初。苹果公司在发布首款 iPhone 前夕，遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定，应对 iPhone 这种小屏幕浏览 桌面端 站点的问题。 这当中最出名的，当属双击缩放(double tap to zoom)。这也是会有上述 300 毫秒延迟的主要原因。 双击缩放 双击缩放，顾名思义，即用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。 下面以这篇 网站响应时间的文章 页面为例，刚一打开页面，除了文章本身，我们还看到顶部通栏、菜单等非关键性要素。 我们进入这个页面的目的显然是为了阅读这篇文章。所以当我们双击屏幕时，Safari 会相当智能地缩放至主体文章。 上述例子表明，iOS Safari 在双击后

移动端300毫秒延迟的由来： 　　双击缩放，顾名思义，即用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。 那么这和 300 毫秒延迟有什么联系呢？ 假定这么一个场景。用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。 解决方案： 　　　　1、设置meta标签禁止缩放 @1 <meta name="viewport" content="user-scalable=no"/> <meta name="viewport" content="initial-scale=1, maximum-scale=1">/ 表明这个页面是不可缩放的，那双击缩放的功能就没有意义了，此时浏览器可以禁用默认的双击缩放行为并且去掉300ms的点击延迟。 这个方案有一个缺点，就是必须通过完全禁用缩放来达到去掉点击延迟的目的，然而完全禁用缩放并不是我们的初衷，我们只是想禁掉默认的双击缩放行为，这样就不用等待300ms来判断当前操作是否是双击。但是通常情况下，我们还是希望页面能通过双指缩放来进行缩放操作，比如放大一张图片，放大一段很小的文字。 @2 <meta name="viewport" content="width=device