移动端事件绑定移动端事件绑定

最近做一个移动端项目，引入了fastclick，发现不少问题，翻阅了mdn和w3c，记录一下吧

addEventListener 原型

target.addEventListener(type, listener, options); target.addEventListener(type, listener ,{capture: Boolean, passive: Boolean, once: Boolean}); target.addEventListener(type, listener, useCapture); target.addEventListener(type, listener[, useCapture, wantsUntrusted]);

前面两个参数，不需要说明，新支持了options对象
options：

capture: Boolean，表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。
once: Boolean，表示 listener 在添加之后最多只调用一次。如果是 true， listener 会在其被调用之后自动移除。
passive: Boolean，表示 listener 永远不会调用 preventDefault()。如果 listener 仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告。
mozSystemGroup: 只能在 XBL 或者是 Firefox' chrome 使用，这是个 Boolean，表示 listener被添加到 system group。

新增加的options属性，支持了 passive 和 once 属性

div.addEventListener('click', function(){},{once: true}) // 事件只会执行一次

div.addEventListener('click', function(){}, {passive: true}) // 浏览器默认不会执行event.preventDefault()

判断是否支持

var passiveSupported = false; try { var options = Object.defineProperty({}, "passive", { get: function() { passiveSupported = true; } }); window.addEventListener("test", null, options); } catch(err) {}

可以判断事件绑定是否支持passive特性
fastClick 使用中遇到的表单的坑 fastclick是拦截用户的touchStart touchMove 和touchEnd 事件，看用户操作耗时来组织掉后面的click事件，去程序触发 click事件，从而解决移动端的300ms延时
【移动端事件绑定】但是在以前移动端默认不支持passive，从谷歌提供pwa，在ios11.3以后，由于默认不会执行event.preventDefault()，所以需要手动修正这个bug