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

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

  •  6
  • 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 年前
        1
  •  6
  •   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

        2
  •  -3
  •   lextragon    8 年前

    写一个if语句来检查监听器是否附加了“.passive”。