移动端事件绑定

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

你可能感兴趣的:(移动端事件绑定)