在移动端点击一个元素触发事件的顺序为：touchstart –> touchmove –> touchend –> click

移动端300ms延迟在IOS11中的bug

解决方案

1、禁用缩放 更改默认视口宽度

1
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1">

2、fastclick解决300ms延迟问题
首先，需要安装fastclick插件

1
npm install fastclick

3、在main.js文件中引入fastclick，绑定到body上

1
2
import FastClick from "fastclick"
FastClick.attach(document.body);

这就是常用来解决移动端300ms延迟的方法。但是这种方法在iOS11的系统中存在bug。

4、iOS11系统中出现的bug
在iOS11系统下，点击input输入框的时候会出现不灵敏的现象。

解决方案:

点我展示代码 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
FastClick.prototype.focus = function (targetElement) {
  var length;
  var deviceIsWindowsPhone = navigator.userAgent.indexOf("Windows Phone") >= 0;
  var deviceIsIos = /iP(ad|hone|od)/.test(navigator.userAgent) && !deviceIsWindowsPhone;
  //兼容处理:在iOS7中，有一些元素（如date、datetime、month等）在setSelectionRange会出现TypeError
  //这是因为这些元素并没有selectionStart和selectionEnd的整型数字属性，所以一旦引用就会报错，因此排除这些属性才使用setSelectionRange方法
  if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month') {
    length = targetElement.value.length;
    // 修复bug ios 11.3不弹出键盘，这里加上聚焦代码，让其强制聚焦弹出键盘
    targetElement.setSelectionRange(length, length);
  } else {
    targetElement.focus();
  }
}
</script>

注意：
setSelectionRange是HTMLInputElement的一个方法,用来设定input textare的当前文本的起始位置和结束位置。
(MDN文档）
对setSelectionRange方法只能用于类型为文本、搜索、连接、电话号码、密码的输入，以及在Chrome33开始访问其余类型的属性和方法抛出异常。
输入类型为数字时会抛出：“不能从’HTMLInputElement’中读取’selectionStart’属性：输入元素的类型(‘number’)不支持选择（Failed to read the ‘selectionStart’ property from ‘HTMLInputElement’: The input element’s type (‘number’) does not support selection）”。