# 300ms点击延迟
移动端的`300ms`点击延迟是因为移动端可以进行双击缩放的操作，因此浏览器在`click`之后要等待`300ms`，看用户有没有下一次点击，也就是判断这次操作是单击还是双击。如果通过监听`touchstart`事件来替代`click`事件的话，会导致一些问题：`touchstart`是手指触摸屏幕就触发，有时候用户只是想滑动屏幕，却触发了`touchstart`事件；当页面上有两个元素`A`和`B`，`A`元素在`B`元素上重叠放置，如果`A`元素的`touchstart`事件绑定的回调函数是隐藏`A`元素自身，那么当点击`A`元素后`A`元素会消失，事件的触发顺序是`touchstart -> touchend -> click`，如果在`300ms`内没有第二次点击便会触发`click`事件，此时由于`A`元素消失，那么`click`事件便落到了`B`元素上，如果`B`元素是个链接或者绑定了`click`事件，那么`B`元素的默认行为或者是绑定的事件回调便会意外地触发，这就是点击穿透问题，解决这个问题还是需要解决`click`事件的`300ms`延迟问题。

## 解决方案

### 禁止缩放
通过完全禁止缩放来使双击缩放的功能失效，此时浏览器就可以禁用默认的双击缩放行为并且去掉`300ms`点击延迟，但是在这种情况下双指缩放的功能也会失效。

```html
<meta name="viewport" content="user-scalable=no">
<!-- 或 -->
<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1">
```

### 更改默认的视口宽度
浏览器在包含`width=device-width`也就是视口宽度`=`设备宽度或者设置为比`viewport`值更小的页面上禁用双击缩放行为，没有双击缩放就没有`300ms`点击延迟，这种方案没有完全禁用缩放，而是禁用浏览器默认的双击缩放行为，用户仍然可以通过双指缩放操作来缩放页面。

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

### touch-action
`CSS`的`touch-action`属性用于设置触摸屏用户如何操纵元素的区域，它允许移除特定元素或整个文档的触发延迟，而无需禁用缩放。

```css
touch-action：none;
/* 浏览器兼容性 https://caniuse.com/#search=touch-action */
```

### FastClick 
`FastClick`是`FT Labs`专门为解决移动端浏览器`300ms`点击延迟问题所开发的一个轻量级的库。

```javascript
document.addEventListener('DOMContentLoaded', function() {
    FastClick.attach(document.body);
}, false);
// https://github.com/ftlabs/fastclick
```



## 每日一题

```
https://github.com/WindrunnerMax/EveryDay
```

## 参考

```
https://www.cnblogs.com/shytong/p/5463673.html
https://www.cnblogs.com/shiyou00/p/10410935.html
https://blog.csdn.net/qq_41047322/article/details/81287325
```