前端ABC做过移动端项目的童鞋应该都有发现，点击事件在移动端上面有延迟，移动端click屏幕产生200-300 ms的延迟响应，百度搜索发现，之所以存在这种情况是因为iphone设计了双击放大显示的功能–这就是300ms延迟的来源：如果用户一次点击后300ms内没有其他操作，则认为是个单击行为；否则为双击放大行为。
双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。
原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接<a href=”#”></a>，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作，所以，捕获第一次单击后，浏览器会先Hold一段时间t，如果在t时间区间里用户未进行下一次点击，则浏览器会做单击跳转链接的处理，如果t时间里用户进行了第二次单击操作，则浏览器会禁止跳转，转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢？在IOS safari下，大概为300毫秒。这就是延迟的由来。造成的后果用户纯粹单击页面，页面需要过一段时间才响应，给用户慢体验感觉，对于web开发者来说是，页面js捕获click事件的回调函数处理，需要300ms后才生效，也就间接导致影响其他业务逻辑的处理。
解决方案
1.禁止缩放
<meta name=”viewport” content=”width=device-width,user-scalable=”no” >
2、指针事件
CSS：-ms-touch-action:none 点击后浏览器不会启用缩放操作，也就不存在延迟。 【这种方法兼容性很不好】
3、FastClick库：
FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库，
FastClick在检测到touchend事件后，会立即触发一个模拟的click事件，并把300ms后真正的click事件阻止掉，
当FastClick检测到页面中使用了user-scalable:no或者touch-action:none方案时，会静默退出
fastClick.js
欢迎分享本文，转载请保留出处：前端ABC » 移动端 点击延迟问题