出现这个问题的背景
- double tap to zoom
第一代苹果手机发布时，为了展示自己的手机有多牛，去访问了纽约时报的网页，从手机上就能访问电脑上才能访问的网页的效果，双击一下屏幕就放大了。第一次点击完后会不会有第二次点击呢？所以问题就出现了，第一次点击完先不去执行点击事件，延迟 300ms，如果没有点击第二次才去执行。
初期解决方案 FastClick
window.addEventListener("load", function() {
FastClick.attach(document.body);
})
FastClick 原理
-
监听 touchend 事件（touchstart touchend 会先于 click 触发）
-
使用自定义 DOM 事件模拟一个 click 事件
-
把默认的 click 事件（300ms 之后触发）给禁用掉
document.body.addEventListener('touchend', function (event) {
// 阻止默认事件（屏蔽之后的click事件）
event.preventDefault()
var touch = event.changedTouches[0]
// 合成click事件，并添加可跟踪属性forwardedTouchEvent
var clickEvent = document.createEvent('MouseEvents')
clickEvent.initMouseEvent('click', true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null)
clickEvent.forwardedTouchEvent = true // 自定义的
targetElement.dispatchEvent(clickEvent)
})
现在浏览器的改进
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>title</title>
</head>
只要 content 里面有 width=device-width 就不会有 click 300ms 的延迟。
android在: chrome 32 版本之后
ios版本在：9.3之后
