<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" >
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button>点我</button>
</body>
<script>
(function(){
let button = document.querySelector("button");
button.onclick=function(){
let time=new Date().getTime()
console.log('button被点击余'+time);
}
})()
/*
1. click300ms 延迟问题
为了兼容移动端：对click惊醒了，如果2次点击在300ms 之内的话就对页面进行放大或者是缩小的操作。
问题的产生：
1. 以前都的网站都是大屏的，为了在移动端能够显示页面，苹果设计了一个双击缩放，点击一次后，在300ms内再次点击就是双击缩放，所以要等待300ms，
效果不错，其他的流量拿起厂家都效仿了。
需要把meta中的这个去掉 content="width=device-width, initial-scale=1.0" 才回产生这个问题 ,默认生成的就是 <meta name="viewport" content="width=device-width, initial-scale=1.0">
解决：
1.禁用缩放
<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="initial-scale=1,maximum-scale=1">
缺点：不止禁用了，双击缩放，也禁用了双指移动缩放
2. 更改默认的视口宽度
<meta name="viewport" content="width=device-width">
3. FastClick
FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。
FastClick的实现原理是在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后的click事件阻止掉。
4. 通过 touchstart 和 touchend模拟实现
能不能直接用touchstart代替click呢，
答案是不能，使用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元素是一个链接，那此时页面就会意外地跳转。
作者：EdmundChen
链接：https://www.jianshu.com/p/6fd2873183e1
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
*/
</script>
</html>
