方案一：禁用缩放
当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. OS&SYS&Shuti模块
			
    #sys.argv   主要针对脚本可以读取参数 Shuti模块 import shutil f1=open('笔记',encoding='utf-8') f2=open('笔记2','w',enco ...
    
			
    2. 
						
  2. if else和switch case那个效率更高一点
			
    switch...case写法: switch (表达式){ case 值1 : 语句1 break; case 值2 : 语句2 break; ... default : 语句n break; }  ...
    
			
    3. 
						
  3. storj白皮书v3最全面解读，Docker创始人的加入能否扳倒AWS S3
			
    Storj新发了白皮书v3,地址是:https://storj.io/storjv3.pdf. 这次白皮书一共有90页,看完还真要费不少时间.如果你没有时间看,可以看一下我这篇快速技术解读. 上次St ...
    
			
    4. 
						
  4. Linux报错：bash: pip: command not found
			
    $ wget https://bootstrap.pypa.io/get-pip.py$ python get-pip.py$ pip -V #查看pip版本 接下来就可以随便pip安装东西了
    
			
    5. 
						
  5. 使用css实现时间轴
			
    本文将使用css来实现一个左右交叉布局的时间轴,效果如下: 使用的都是一些常用的css,代码如下: <!DOCTYPE> <html> <head> <tit ...
    
			
    6. 
						
  6. 关于报错：There is already 'xxxController' bean method的解决方法
			
    报这个错的原因是因为你controller里的@RequestMapping中的路径有重复! 如:
    
			
    7. 
						
  7. ORACLE中用户等系统信息操作
			
    1.查看所有用户:select * from dba_users;   select * from all_users;   select * from user_users; 2.查看用户或角色系统 ...
    
			
    8. 
						
  8. java.lang.NoClassDefFoundError: org/apache/tomcat/util/res/StringManager
			
    一个比较老的web项目,  IDEA 导入后不能用,  出现了各种问题, 但是, 别人用eclipse 导入就不会有问题,  我折腾了半天, 还是各种问题,  真是郁闷了.  哎, 承认很难配置吧,  ...
    
			
    9. 
						
  9. Jmeter正则表达式提取器（转载）
			
    转载自 http://blog.csdn.net/qq_35885203 使用jmeter来测试时,经常会碰到需要上下文传输数据的情况,如登录后生成的token,在其他页面的操作,都需传入这个toke ...
    
			
    10. 
						
  10. leetcode301
			
    class Solution { public List<String> removeInvalidParentheses(String s) { List<String> a ...
    
			
    11.