移动端事件绑定

最近做一个移动端项目，引入了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