javascript - 如何检查监听器事件是否为被动事件？

Question

我正在编写一个手势/ Action 库，它还管理事件监听器和触发。我已经实现了我的库以支持通过 API 设置被动监听器的手势对象，如下所示:this.on('touchstart.passive', this.startHandler, {reject: errorHandler })。我的库支持多种手势，设置多个监听器，有被动的也有非被动的。该库将确保最多只有一个 真正的 监听器将附加到 DOM。所以我们最多可以有 2 个 touchstart 监听器，其中一个是被动的，另一个不是。

我的问题是，我无法检测接收到的事件是否附加了 { passive: true } 选项。我认为我可以在 native 事件对象上使用 cancelable 属性，因为在被动事件上调用 preventDefault() 是错误的。但是 cancelable 属性始终为真，即使浏览器会在 preventDefault() 上抛出错误也是如此。

我已阅读WhatWG DOM standard on event listeners并在 Firefox 和 Chrome 中做了一些测试，但找不到任何关于如何区分这两种类型事件的信息。

这对我的库很重要，因为被动事件监听器以 ".passive" 后缀作为键控，例如“touchstart.passive” 与 “touchstart”。

如何检查接收到的 DOM 事件的被动选项，以便触发正确的内部监听器？

编辑

目前我的附加监听器流程的要点是:

function eventNotifier(event) {
    this.fire(event.cancelable ? event.type : event.type + '.passive', new GestureEvent(event))
}

addEvent(el, realEventName, eventNotifier, options)
nativeListeners.set(eventName, 1)

function addEvent (el, type, listener, options) {
    el.addEventListener(type, listener, options || true)
}

nativeListeners 是一个跟踪真实事件监听器的 Map

Answer 1

您可以在调用 event.preventDefault(); 后测试 event.defaultPrevented 的值。如果它是一个被动事件，浏览器会为调用抛出警告/错误，但它不会停止 javascript 的执行。所以以下应该有效:

document.addEventListener('touchstart', function(event) {
  event.preventDefault();
  
  if (event.defaultPrevented) {
    // This is not a passive event
  } else {
    // This is a passive event
  }
}, { passive: true });

我在这个链接中找到了这个答案的灵感:https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md