代码之家 › 专栏 › 技术社区 › dotnetCarpenter

如何检查侦听器事件是否为被动事件?

dom-events w3c dom javascript

dotnetCarpenter · 技术社区 · 8 年前

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

我的问题是,我无法检测接收到的事件是否附加了 { passive: true } 选项我想我可以用 cancelable 属性,因为调用 preventDefault() 在被动事件上。但是 可取消 属性始终为true,即使浏览器将在 preventDefault() 。

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

这对我的库很重要,因为被动事件侦听器是用 ".passive" 后期修复,例如。 "touchstart.passive" vs公司 "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 跟踪真实事件侦听器

2 回复 | 直到 8 年前

emilchristensen 8 年前

您可以测试 event.defaultPrevented 在呼叫之后 event.preventDefault(); 。如果调用是被动事件,浏览器将为调用发出警告/错误,但不会停止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