方案一：禁用缩放
当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. hash的排序（转载）
			
    sort函数 sort LISTsort BLOCK LISTsort SUBNAME LIST sort 的用法有如上3种形式.它对LIST进行排序,并返回排序后的列表.假如忽略了SUBNAME或B ...
    
			
    2. 
						
  2. python导入requests库一直报错原因总结 （文件名与库名冲突）
			
    花了好长时间一直在搞这个 源代码: 一直报如下错误: 分析原因: 总以为没有导入requests库,一直在网上搜索各种的导入库方法(下载第三方的requests库,用各种命令工具安装),还是报错 后来 ...
    
			
    3. 
						
  3. LeetCode【88. 合并两个有序数组】
			
    首先想到的方法就是,假设一个nums3数组,然后,比较nums1与nums2的数值大小,然后,放在nums3中,再将nums3转移到nums1中. 实现起来很麻烦,1.没有考虑到下标问题,结果就Arr ...
    
			
    4. 
						
  4. 简单分析下mybatis中mapper文件中小知识
			
    <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE mapper PUBLIC "-// ...
    
			
    5. 
						
  5. php解析excel文件
			
    public static function getStaffByXlsx($path) { /*dirname(__file__): 当前代码所在的目录,$path: ”/文件名“ */ $PHPR ...
    
			
    6. 
						
  6. Android 开发  VectorDrawable 矢量图 （一）了解Android矢量图与获取矢量图
			
    VectorDrawable 矢量图 三部曲: Android 开发 VectorDrawable 矢量图 (一)了解Android矢量图与获取矢量图 Android 开发 VectorDrawabl ...
    
			
    7. 
						
  7. 《算法导论》——随机化快排RandomizedQuickSort
			
    今日算法:随机化快排RandomizedQuickSort 基础工作swap交换和partition分治 /* *交换数组的两个元素 *fromIndex和toIndex为要交换的两个元素的索引 */ ...
    
			
    8. 
						
  8. 关于PS的操作
			
    1.移动工具 Ctrl+J:拷贝图层 Ctrl+T:自由变换调整大小 Alt+Shift:全选 Ctrl+G:图层编组 Alt+Delete:选中图层填充当前颜色 Ctrl+Alt+Z:后退一步 2. ...
    
			
    9. 
						
  9. CSS: pseudo-classes and pseudo-elements
			
    1.Definition: pseudo-classes The pseudo-class concept is introduced to permit selection based on inf ...
    
			
    10. 
						
  10. Codeforces Round #437 B. Save the problem!
			
    题意: 给你一个方案数,要求你输出满足该条件的总金额,面值数,和各个面值是多少,答案有多个,随便输出一个即可. Examples Input 18 Output 30 41 5 10 25 Input ...
    
			
    11.