方案一：禁用缩放
当HTML文档头部包含如下meta标签时：

<meta name="viewport" content="user-scalable=no">

<meta name="viewport" content="initial-scale=1,maximum-scale=1">

表明这个页面是不可缩放的，那双击缩放的功能就没有意义了，此时浏览器可以禁用默认的双击缩放行为并且去掉300ms的点击延迟。
这个方案有一个缺点，就是必须通过完全禁用缩放来达到去掉点击延迟的目的，然而完全禁用缩放并不是我们的初衷，我们只是想禁掉默认的双击缩放行为，这样就不用等待300ms来判断当前操作是否是双击。但是通常情况下，我们还是希望页面能通过双指缩放来进行缩放操作，比如放大一张图片，放大一段很小的文字。

方案二：更改默认的视口宽度
一开始，为了让桌面站点能在移动端浏览器正常显示，移动端浏览器默认的视口宽度并不等于设备浏览器视窗宽度，而是要比设备浏览器视窗宽度大，通常是980px。我们可以通过以下标签来设置视口宽度为设备宽度。

<meta name="viewport" content="width=device-width">

因为双击缩放主要是用来改善桌面站点在移动端浏览体验的，而随着响应式设计的普及，很多站点都已经对移动端坐过适配和优化了，这个时候就不需要双击缩放了，如果能够识别出一个网站是响应式的网站，那么移动端浏览器就可以自动禁掉默认的双击缩放行为并且去掉300ms的点击延迟。如果设置了上述meta标签，那浏览器就可以认为该网站已经对移动端做过了适配和优化，就无需双击缩放操作了。
这个方案相比方案一的好处在于，它没有完全禁用缩放，而只是禁用了浏览器默认的双击缩放行为，但用户仍然可以通过双指缩放操作来缩放页面。

方案三：CSS touch-action
网上很多文章把这个方案归结为指针事件，这令我很疑惑。

以我的理解来看，指针事件的提出并不是为了解决300ms点击延迟的，而是为了使用一个单独的事件模型，对鼠标、触摸、触控等多种输入类型进行统一的处理。也就是说，移动浏览器不用再为不同的输入设备设计不同的事件，网页的开发者也不用再为不同输入类型的设备写不同的事件响应代码，而是通过统一的指针事件就可以开发出跨不同输入类型终端的应用。

跟300ms点击延迟相关的，是touch-action这个CSS属性。这个属性指定了相应元素上能够触发的用户代理（也就是浏览器）的默认行为。如果将该属性值设置为touch-action: none，那么表示在该元素上的操作不会触发用户代理的任何默认行为，就无需进行300ms的延迟判断。

而设置这个CSS属性与否，指针事件应该都是可以工作的。所以，网上的文章令我很疑惑，希望有大神能给我指示~ 。。~





二、点击穿透问题


说完移动端点击300ms延迟的问题，还不得不提一下移动端点击穿透的问题。可能有人会想，既然click点击有300ms的延迟，那对于触摸屏，我们直接监听touchstart事件不就好了吗？

使用touchstart去代替click事件有两个不好的地方。

第一：touchstart是手指触摸屏幕就触发，有时候用户只是想滑动屏幕，却触发了touchstart事件，这不是我们想要的结果；

第二：使用touchstart事件在某些场景下可能会出现点击穿透的现象。


什么是点击穿透？

假如页面上有两个元素A和B。B元素在A元素之上。我们在B元素的touchstart事件上注册了一个回调函数，该回调函数的作用是隐藏B元素。我们发现，当我们点击B元素，B元素被隐藏了，随后，A元素触发了click事件。


这是因为在移动端浏览器，事件执行的顺序是touchstart > touchend > click。而click事件有300ms的延迟，当touchstart事件把B元素隐藏之后，隔了300ms，浏览器触发了click事件，但是此时B元素不见了，所以该事件被派发到了A元素身上。如果A元素是一个链接，那此时页面就会意外地跳转。





作者：tsyeyuanfeng
链接：http://www.jianshu.com/p/6e2b68a93c88
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。



方案一：引入fastclick






<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>fastclick说明书</title>

    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

    <script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>

</head>

<body>

<button id="box">click me!</button>

<script type="text/javascript">

    /*注释：两个入口可选其一,引用的js包必须放到标签上边*/

    //入口1：原生入口

    if ('addEventListener' in document) {

        document.addEventListener('DOMContentLoaded', function(){

            FastClick.attach(document.body);

        }, false);

    }

    //入口2：jquery入口（如果使用jquery的话，使用以下入口即可）

    /*$(function() {

        FastClick.attach(document.body);

    });*/

    //点击效果

    document.querySelector("#box").addEventListener("click",function(){

        alert("click me!");

    },false)

</script>

</body>

</html>





　　




												


											
移动端300ms延迟解决的几种方法；的更多相关文章
	

    
								
  1. 移动端300ms延迟解决方法在vue 里面的一些小坑
		
    话不多说上图: 至于import为什么会报错,瞅下面这个图: 总结:要搞懂个必须了解下es6的解构赋值才能在这方面装逼,网上资料一大堆自行百度.
    
		
    2. 
						
  2. touch-action 解决移动端300ms延迟问题
		
    CSS3 新属性, touch-action: manipulation; 可以有效的解决移动端300ms延迟的问题 移动端300ms延迟问题一直都是h5APP的痛点, 有很多库或者方法都可以解决,  ...
    
		
    3. 
						
  3. 移动端300ms延迟问题和点击穿透问题
		
    一.移动端300ms延迟问题: 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应,而是会 ...
    
		
    4. 
						
  4. js解决苹果移动端300ms延迟的问题
		
    做移动端页面开发的可能会了解到,ios系统click事件会有卡顿的现象,这个问题的根源是苹果本身自带的safari有双击放大页面的功能,再次双击会返回到原始尺寸,所以在第一次点击的系统会延迟300ms ...
    
		
    5. 
						
  5. 解决移动端300ms延迟fastclick
		
    为什么要使用fastclick 移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击.为了能够立即响应用户的点击事件,才有了fastclick. f ...
    
		
    6. 
						
  6. 用Fastclick解决移动端300ms延迟问题
		
    移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击. 为了能够立即响应用户的点击事件,才有了FastClick. 用法: 引入fastclick. ...
    
		
    7. 
						
  7. 移动端300ms延迟由来及解决方案
		
    1.300ms延迟由来 300 毫秒延迟的主要原因是解决双击缩放(double tap to zoom).双击缩放,顾名思义,即用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器会将网页 ...
    
		
    8. 
						
  8. IOS中延迟执行的几种方法
		
    前几天去国美在线面试,就遇到了上面的问题,当时是笔试,只写出来了第一种方法,现在整理了一下. //1.performSelector方法:在当前线程中执行的方法,使用默认模式,并延迟执行@select ...
    
		
    9. 
						
  9. hive权威安装出现的不解错误！（完美解决）两种方法都可以
		
    以下两种方法都可以,推荐用方法一! 方法一: 步骤一: yum -y install mysql-server 步骤二:service mysqld start 步骤三:mysql -u root - ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Python【每日一问】05
			
    问:请解释一下Python 中的 pass 语句.continue.break有什么作用?并辅以代码说明 答: 1.pass :pass是空语句,是为了保持程序结构的完整性.通常用于不知道接下来代码应 ...
    
			
    2. 
						
  2. 大数据的乘法实现——C语言
			
    1大数据乘法的算法思路: 输入两个字符串,得到结果,例如:123456789*123456789: 思路:1)首先 123456789*1 = 9   18  27  36  45  54  63   ...
    
			
    3. 
						
  3. word embeddding和keras中的embedding
			
    训练好的词向量模型被保存下来,该模型的本质就是一个m*n的矩阵,m代表训练语料中词的个数,n代表训练时我们设定的词向量维度.当我们训练好模型后再次调用时,就可以从该模型中直接获取到对应词的词向量. 通 ...
    
			
    4. 
						
  4. 涂抹mysql笔记-mysql数据库文件结构
			
    <>初始化选项文件:默认位置:windows平台 windir\my.ini windir可通过echo $WINDIR$查看 系统盘的根目录即:c:\my.ini installdir\ ...
    
			
    5. 
						
  5. PyQt--QTreeWidget
			
    转载:loster_Li QTreeWidget的继承关系如下图: 因为继承关系是 QAbstractItemView->QTreeView->QTreeWidget  ,所以和QTabl ...
    
			
    6. 
						
  6. python中 函数名加括号与不加括号
			
    加括号是返回函数的结果,不加括号相当于函数的调用.
    
			
    7. 
						
  7. List转Json函数
			
    public string ObjectToJson<T>(string jsonName, IList<T> IL) { StringBuilder Json = new S ...
    
			
    8. 
						
  8. docker报错
			
    用docker搭建环境时可能会遇到错误:No releases available for package "xxxx" No releases available for pac ...
    
			
    9. 
						
  9. Linux命令:builtin
			
    语法: builtin [shell-builtin [arg ...]] 说明: 明确告诉bash执行的是内建命令,而不是和内建命令同名的函数.这实际就是bash容许用户自定义和builtin命令同 ...
    
			
    10. 
						
  10. FM-分解机模型详解
			
    https://blog.csdn.net/zynash2/article/details/80029969 FM论文地址:https://www.csie.ntu.edu.tw/~b97053/pa ...
    
			
    11.