我正在编写一个手势/ 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
最佳答案
您可以在调用 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
关于javascript - 如何检查监听器事件是否为被动事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50122961/