移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件，这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件，才有了FastClick。
早在 2007 年初，苹果公司在发布首款 iPhone 前夕，遇到一个问题：当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定，应对 iPhone 这种小屏幕浏览桌面端站点的问题。
从点击屏幕上的元素到触发元素的 click 事件，移动浏览器会有大约 300 毫秒的等待时间。这是因为浏览器想看看你是不是要进行双击（double tap）操作。
译： 从点击屏幕上的元素到触发元素的 click 事件，移动浏览器会有大约 300 毫秒的等待时间。为什么这么设计呢？ 因为它想看看你是不是要进行双击（double tap）操作。
fastclick 是具有消除移动端浏览器上的点击事件的 300ms 的延迟的作用。
桌面浏览器; 如果视口元标签中设置了width=device-width，Android上的Chrome 32+会禁用300ms延时;
<meta name="viewport" content="user-scalable=no">
在近期的一个移动端项目中，有一个页面需要有弹框提示，并且这个弹框通过关闭按钮关闭。页面当中使用了 iScroll 来实现页面局部滚动，在 iScroll 的配置当中把 tap 和 click 事件都开启了。 代码如下：
用vue编写项目接近尾声，需要集成到移动端中，在webstorm上界面，运行效果都很完美，但是在苹果手机上各种问题都出现了，原生项目一向滑动流畅，事件响应迅速，可是苹果手机打开这个项目有两个问题，(1).滑动页面卡顿，(2).点击事件响应缓慢，百度才发现在苹果手机上有300ms的延迟。
1.在终端输入以下命令进行安装 npm install fastclick -S 2.在你用脚手架搭建好的项目中，找到mian.js这个入口文件，打开 3.在其中加入： import FastClic
快速反馈对于任何 UI 的实现都是至关重要的。研究表明，100ms 是界面让用户感到即时的最大延迟。尽管如此，移动网络仍然受到一个巨大的反馈问题的困扰：触摸任何元素后，延迟 300 毫秒。这种延迟是许多用户认为基于 HTML 的 Web 应用程序“卡顿”的最重要原因之一。在本文中，本文将带你了解移动端点击事件延迟的从诞生到消亡的过程。
移动端要求的是快速开发，所以我们经常会借助于一些插件来帮我完成操作，那么什么是插件呢？
3.iPhone6 Plus分辨率414x736，像素1242x2208，@3x，（注意，在这个分辨率下渲染后，图像等比降低pixel分辨率至1080p(1080x1920)
一般情况下，如果没有经过特殊处理，移动端浏览器在派发点击事件的时候，通常会出现300ms左右的延迟。也就是说，当我们点击页面的时候移动端浏览器并不是立即作出反应，而是会等上一小会儿才会出现点击的效果。在移动WEB兴起的初期，用户对300ms的延迟感觉不明显。但是，随着用户对交互体验的要求越来越高，现今，移动端300ms的点击延迟逐渐变得明显而无法忍受。
2、配置vuex全局 vuex的全局配置与上一节中vue-router的配置相似，抽象上我们有一个store文件夹，store文件夹下内容是实现，main.js中调用实现的内容。 我们看到import store from 'store/index' 代表引用store的index实现，在第12行中将store的实现作为参数赋值给Vue的全局配置进行使用，这样所有的页面都可以使用Vuex了。
移动端用tap时会有穿透问题 一：click与tap比较 click与tap都会触发点击事件，但是在手机web端，click会有200-300ms的延迟，所以一般用tap代替click作为点击事件。singleTap 和doubleTap分别代表单次点击和双次点击 二：tap的穿透处理 使用zepto框架的tap的点击事件，来规避click事件的延迟响应，会出现穿透，即点击会触发非当前层的点击事件。 三：穿透原因 问题：在HTML5点击了q以后，弹出b的弹框 因为tap事件是通过document绑定了tou
移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放(double tap to zoom) 页面。
移动端的300ms点击延迟是因为移动端可以进行双击缩放的操作，因此浏览器在click之后要等待300ms，看用户有没有下一次点击，也就是判断这次操作是单击还是双击。如果通过监听touchstart事件来替代click事件的话，会导致一些问题：touchstart是手指触摸屏幕就触发，有时候用户只是想滑动屏幕，却触发了touchstart事件；当页面上有两个元素A和B，A元素在B元素上重叠放置，如果A元素的touchstart事件绑定的回调函数是隐藏A元素自身，那么当点击A元素后A元素会消失，事件的触发顺序是touchstart -> touchend -> click，如果在300ms内没有第二次点击便会触发click事件，此时由于A元素消失，那么click事件便落到了B元素上，如果B元素是个链接或者绑定了click事件，那么B元素的默认行为或者是绑定的事件回调便会意外地触发，这就是点击穿透问题，解决这个问题还是需要解决click事件的300ms延迟问题。
我们在上面《页面分类》的项目中，对 tap 事件的处理使用的是 touch 事件处理的，因为如果使用 click 事件的话，总会有延时。
1.click 事件在移动端会有 200-300ms 的延迟，主要原因是苹果手机在设计时，考虑到用户在浏览网页时需要放大，所以，在用户点击的 200-300ms 之后，才触发 click，如果 200-300ms 之内还有 click，就会进行放大缩小。
或者我们可以使用可视化安装、配置、安装插件、启动项目。 在命令窗口中使用vue ui，弹出页面
作者：愣锤 https://juejin.im/post/5b174de8f265da6e410e0b4e
adminLTE的官方网站：adminLTE官方网站 和github：adminLTE的github
大家都知道移动端的程序中，是没有点击事件的，只有 touchstart、touchmove、touchend。
作为一个开发了多个 H5 项目的前端工程师，在开发过程中难免会遇到一些兼容性等爬过坑的问题。现在我将这些问题一一汇总一下，并在后面给出坑产生的原理，和现阶段常规的填坑方案。由此来做一个阶段性的总结。
Github（55.1k）: https://github.com/lodash/lodash
这节课学习的是移动端的返回顶部,当我们页面滚动到内容以后,就出现返回顶部的标志,只要我们点击就能返回到页面的顶部.
一、事件触发顺序 PC网页上的大部分操作都是用鼠标的，即响应的是鼠标事件，包括mousedown、mouseup、mousemove和click事件。一次点击行为，可被拆解成：mousedown -> mouseup -> click 三步。 手机上没有鼠标，所以就用触摸事件去实现类似的功能。touch事件包含touchstart、touchmove、touchend，注意手机上并没有tap事件。手指触发触摸事件的过程为：touchstart -> touchmove -> touchend。 手机
SSR(Server-Side Rendering)，在SPA(Single-Page Application)出现之前，网页就是在服务端渲染的。服务器接收到客户端请求后，将数据和模板拼接成完整的页面响应到客户端，客户端将响应结果渲染出来。如果用户需要浏览新的页面，则需要重复这个过程。随着Angular、React和Vue的兴起，SPA开始流行，单页面应用可以在不重载整个页面的情况下，通过ajax和服务器进行交互，高效更新部分页面，这无疑带来了良好的用户体验。然而，对于需要SEO、追求首屏速度的页面，使用SPA是糟糕的。如果我们想使用Vue，又需要考虑到SEO、首屏渲染速度，那该怎么办？好在Vue是支持服务端渲染的，接下来我们主要说的是Vue的服务端渲染。
请注意，本文编写于 2082 天前，最后修改于 173 天前，其中某些信息可能已经过时。
bash 切换到桌面 运行 vue init webpack vue-demo 生成初始化vue项目
https://github.com/almasaeed2010/AdminLTE/releases
本次的系列博文的知识点讲解和代码，主要是来自于Vue 2.0 高级实战-开发移动端音乐WebApp课程，由个人总结并编写，其代码及知识点部分，均有所更改和删减，关于更多 Vue 2.0 的知识和实际应用，还请大家购买课程进行学习实践，该系列博文的发布已得到黄轶老师的授权许可
「第一个目的」：这一个移动端记账本的创作来源呢，其实是我在学习了理财的课程之后，突然想为自己写一个记账的东西来记录自己每天花费的钱，从而可以降低那些不必要的开销，从而达到理财的第一步。
解决办法 禁用浏览器缩放 通过faskclick github 在页面引入faskclick.js文件 添加如下代码 if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { FastClick.attach(document.body); }, false); } 这个时候页面所有click已经解决了延迟问题
上下滑动页面会产生卡顿，手指离开页面，页面立即停止运动。整体表现就是滑动不流畅，没有滑动惯性。
完成移动端的开发项目之后，发现谷歌自带的调试器似乎没有什么太大的作用，整天借同事的苹果手机测bug,尽管同事不厌其烦，但还是觉得这iPhone系列适配问题适配到想逃逃逃，好在项目已经顺利完成，测试通过
本文首发于前端面试总结@知乎专栏，各位可以通过点击文章下方的阅读原来来访问原文地址 问题一览 mouseover和mouseenter两个事件有什么区别？ 移动端的click事件行为与PC端有什么不
cssrem：一个CSS值转REM的VSCode插件； lib-flexible：移动端弹性布局适配解决方案； vue-touch：移动端相关点击，滑动，拖动，多点触控等事件封装； vee-validate：适用于vue项目中表单验证插件； better-scroll：可能是目前最好用的移动端滚动插件; fastclick：解决移动端click 300ms延迟 vConsole：手机前端开发调试利器 webpack之proxyTable设置跨域 vue组件之间通信（父向子通信，子向父通信，非父子通信）方法示
在 iOS Safari （其他浏览器和 Android 均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如：
使用能快速调用移动设备的电话/短信/邮件三大通讯功能，使用<input>能快速调用移动设备的的图库/文件。 这些功能方便了页面与系统的交互，关键在于调用格式一定要准确，否则会被移动端浏览器忽略。
当我们的Vue项目为了解决IOS设备事件点击卡顿，300ms的延迟的问题，引入了fastclick后，会有很多小的冲突，例如在使用mint-UI实现上拉加载和下拉刷新的时候，经常会触碰到点击事件进入下一个页面，这是因为去掉300毫秒的延迟就会使得页面特别灵敏，想着用阻止冒泡的方式来解决。
https://developer.apple.com/library/prerelease/mac/releasenotes/General/WhatsNewInSafari/Articles/Safari_9_1.html
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
