方案一：禁用缩放
当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. jQuery解决IE6/7/8不能使用 JSON.stringify 函数的问题
			
    原文地址:http://www.ynpxrz.com/n1445665c2023.aspx JSON 对象是在 ECMAScript 第 5 版中实现的,此版于 2009 年 12 月发布:IE6 I ...
    
			
    2. 
						
  2. Python + Robot Framework 环境搭建
			
    一.Python 安装 说明:由于RIDE是基于python2.x开发,后期未做python3.x兼容,所以这里安装python2.7. 链接: https://pan.baidu.com/s/1yf ...
    
			
    3. 
						
  3. markdown工具对比： 作业部落 vs Typora
			
    2者都挺优秀的,但是在具体使用时还是遇到一些问题: 功能 作业部落 Typora 图片调整大小 × √ 在线同步,易于分享 √ × pdf对emoji的支持 × √ pdf的text view: Vi ...
    
			
    4. 
						
  4. 【学习】DataFrame&Series类【pandas】
			
    参考链接:http://blog.csdn.net/yhb315279058/article/details/50226027 DataFrame类: DataFrame有四个重要的属性: index ...
    
			
    5. 
						
  5. 函数内联 inline，__inline，__forceinline
			
    ▶ 感谢大佬的总结[http://www.cnblogs.com/xuemaxiongfeng/articles/2464850.html] ● 存储限定符 __inline 与关键字 inline  ...
    
			
    6. 
						
  6. Linux命令:unlias
			
    语法 unalias [-a] name [name ...] 说明 取消别名. 可以一次取消多个别名,写几个取消几个.不写,取消所有别名. 参数 -a 取消所有别名,不论后面是否跟一个还是多个nam ...
    
			
    7. 
						
  7. Linux常用基础操作命令大全（超实用精心整理）
			
    相信大家都对黑客那种只用命令行对电脑操作的风格惊呆了,其实你也可以做到.linux是一款不同于windows的操作系统,而且它是黑客.渗透人员.运维人员等等必会的.如果你想学习,小编下面整理的命令将会 ...
    
			
    8. 
						
  8. 将font-size设置为 12px 以下，Chrome浏览器只能显示12px怎么办？
			
    将字体大小设置为12px以下,而Chrome浏览器依然只显示12px,因为 Chrome 这款任性的浏览器做了如下限制: 1. font-size 有一个最小值 12px(不同操作系统.不同语言可能限 ...
    
			
    9. 
						
  9. 【原】 The Linux Command Line - Permissions
			
    id - display user identity chmod - umask -
    
			
    10. 
						
  10. tensorflow 1.9 ,bazel 0.15.0,源码编ERROR, Skipping, '//tensorflow/tools/pip_package:build_pip_package',error loading packageCuda Configuration Error, Cannot find libdevice.10.bc under /usr/local/cuda-8.0
			
    最近在看tensorflow 移动端部署,需要编译源码才支持,所以又拾起来了编译这项老工作,其中遇到问题: bazel build --cxxopt="-D_GLIBCXX_USE_CXX1 ...
    
			
    11.