Add eventListener options (capture, passive, once)

README.md

@@ -7,7 +7,7 @@ Track mouse/touch/pointer events for a given element.
 ### PointerTracker
 
 ```js
-import PointerTracker from 'pointer-tracker';
+import PointerTracker from '@douganderson444/pointer-tracker';
 
 const pointerTracker = new PointerTracker(element, {
   start(pointer, event) {
@@ -55,6 +55,11 @@ const pointerTracker = new PointerTracker(element, {
   //
   // This feature only applies to pointer events. The default is false.
   rawUpdates: false,
+  // Set the event listener options
+  // For example, set { capture: true } if you want to capture the event before it reaches listeners
+  // below yours in the DOM tree.
+  // For details, see: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#parameters
+  eventListenerOptions: { capture?: false, passive?: false, once?: false },
 });
 
 // State of the tracked pointers when they were pressed/touched.

dist/PointerTracker.js

@@ -2,7 +2,7 @@
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
     typeof define === 'function' && define.amd ? define(factory) :
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.PointerTracker = factory());
-}(this, (function () { 'use strict';
+})(this, (function () { 'use strict';
 
     class Pointer {
         constructor(nativePointer) {
@@ -33,6 +33,7 @@
                 // https://github.com/w3c/pointerevents/issues/409
                 if (events.length > 0)
                     return events;
+                // Otherwise, Firefox falls through…
             }
             return [this];
         }
@@ -50,7 +51,7 @@
          * @param element Element to monitor.
          * @param options
          */
-        constructor(_element, { start = () => true, move = noop, end = noop, rawUpdates = false, avoidPointerEvents = false, } = {}) {
+        constructor(_element, { start = () => true, move = noop, end = noop, rawUpdates = false, avoidPointerEvents = false, eventListenerOptions = { capture: false, passive: false, once: false }, } = {}) {
             this._element = _element;
             /**
              * State of the tracked pointers when they were pressed/touched.
@@ -96,9 +97,9 @@
                         ? event.target
                         : this._element;
                     capturingElement.setPointerCapture(event.pointerId);
-                    this._element.addEventListener(this._rawUpdates ? 'pointerrawupdate' : 'pointermove', this._move);
-                    this._element.addEventListener('pointerup', this._pointerEnd);
-                    this._element.addEventListener('pointercancel', this._pointerEnd);
+                    this._element.addEventListener(this._rawUpdates ? 'pointerrawupdate' : 'pointermove', this._move, this._eventListenerOptions);
+                    this._element.addEventListener('pointerup', this._pointerEnd, this._eventListenerOptions);
+                    this._element.addEventListener('pointercancel', this._pointerEnd, this._eventListenerOptions);
                 }
                 else {
                     // MouseEvent
@@ -208,16 +209,17 @@
             this._moveCallback = move;
             this._endCallback = end;
             this._rawUpdates = rawUpdates && 'onpointerrawupdate' in window;
+            this._eventListenerOptions = eventListenerOptions;
             // Add listeners
             if (self.PointerEvent && !avoidPointerEvents) {
-                this._element.addEventListener('pointerdown', this._pointerStart);
+                this._element.addEventListener('pointerdown', this._pointerStart, this._eventListenerOptions);
             }
             else {
-                this._element.addEventListener('mousedown', this._pointerStart);
-                this._element.addEventListener('touchstart', this._touchStart);
-                this._element.addEventListener('touchmove', this._move);
-                this._element.addEventListener('touchend', this._touchEnd);
-                this._element.addEventListener('touchcancel', this._touchEnd);
+                this._element.addEventListener('mousedown', this._pointerStart, this._eventListenerOptions);
+                this._element.addEventListener('touchstart', this._touchStart, this._eventListenerOptions);
+                this._element.addEventListener('touchmove', this._move, this._eventListenerOptions);
+                this._element.addEventListener('touchend', this._touchEnd, this._eventListenerOptions);
+                this._element.addEventListener('touchcancel', this._touchEnd, this._eventListenerOptions);
             }
         }
         /**
@@ -254,4 +256,4 @@
 
     return PointerTracker;
 
-})));
+}));

dist/PointerTracker.mjs

@@ -27,6 +27,7 @@ class Pointer {
             // https://github.com/w3c/pointerevents/issues/409
             if (events.length > 0)
                 return events;
+            // Otherwise, Firefox falls through…
         }
         return [this];
     }
@@ -44,7 +45,7 @@ class PointerTracker {
      * @param element Element to monitor.
      * @param options
      */
-    constructor(_element, { start = () => true, move = noop, end = noop, rawUpdates = false, avoidPointerEvents = false, } = {}) {
+    constructor(_element, { start = () => true, move = noop, end = noop, rawUpdates = false, avoidPointerEvents = false, eventListenerOptions = { capture: false, passive: false, once: false }, } = {}) {
         this._element = _element;
         /**
          * State of the tracked pointers when they were pressed/touched.
@@ -90,9 +91,9 @@ class PointerTracker {
                     ? event.target
                     : this._element;
                 capturingElement.setPointerCapture(event.pointerId);
-                this._element.addEventListener(this._rawUpdates ? 'pointerrawupdate' : 'pointermove', this._move);
-                this._element.addEventListener('pointerup', this._pointerEnd);
-                this._element.addEventListener('pointercancel', this._pointerEnd);
+                this._element.addEventListener(this._rawUpdates ? 'pointerrawupdate' : 'pointermove', this._move, this._eventListenerOptions);
+                this._element.addEventListener('pointerup', this._pointerEnd, this._eventListenerOptions);
+                this._element.addEventListener('pointercancel', this._pointerEnd, this._eventListenerOptions);
             }
             else {
                 // MouseEvent
@@ -202,16 +203,17 @@ class PointerTracker {
         this._moveCallback = move;
         this._endCallback = end;
         this._rawUpdates = rawUpdates && 'onpointerrawupdate' in window;
+        this._eventListenerOptions = eventListenerOptions;
         // Add listeners
         if (self.PointerEvent && !avoidPointerEvents) {
-            this._element.addEventListener('pointerdown', this._pointerStart);
+            this._element.addEventListener('pointerdown', this._pointerStart, this._eventListenerOptions);
         }
         else {
-            this._element.addEventListener('mousedown', this._pointerStart);
-            this._element.addEventListener('touchstart', this._touchStart);
-            this._element.addEventListener('touchmove', this._move);
-            this._element.addEventListener('touchend', this._touchEnd);
-            this._element.addEventListener('touchcancel', this._touchEnd);
+            this._element.addEventListener('mousedown', this._pointerStart, this._eventListenerOptions);
+            this._element.addEventListener('touchstart', this._touchStart, this._eventListenerOptions);
+            this._element.addEventListener('touchmove', this._move, this._eventListenerOptions);
+            this._element.addEventListener('touchend', this._touchEnd, this._eventListenerOptions);
+            this._element.addEventListener('touchcancel', this._touchEnd, this._eventListenerOptions);
         }
     }
     /**

dist/index.d.ts

@@ -23,6 +23,11 @@ export declare type InputEvent = TouchEvent | PointerEvent | MouseEvent;
 declare type StartCallback = (pointer: Pointer, event: InputEvent) => boolean;
 declare type MoveCallback = (previousPointers: Pointer[], changedPointers: Pointer[], event: InputEvent) => void;
 declare type EndCallback = (pointer: Pointer, event: InputEvent, cancelled: boolean) => void;
+declare type eventListenerOptions = {
+    capture?: boolean;
+    passive?: boolean;
+    once?: boolean;
+};
 interface PointerTrackerOptions {
     /**
      * Called when a pointer is pressed/touched within the element.
@@ -68,6 +73,11 @@ interface PointerTrackerOptions {
      * This feature only applies to pointer events.
      */
     rawUpdates?: boolean;
+    /**
+     * Set the options of the event listener: capture, passive, and once.
+     * See: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#parameters
+     */
+    eventListenerOptions?: eventListenerOptions;
 }
 /**
  * Track pointers across a particular element
@@ -87,6 +97,7 @@ export default class PointerTracker {
     private _moveCallback;
     private _endCallback;
     private _rawUpdates;
+    private _eventListenerOptions;
     /**
      * Firefox has a bug where touch-based pointer events have a `buttons` of 0, when this shouldn't
      * happen. https://bugzilla.mozilla.org/show_bug.cgi?id=1729440
@@ -101,7 +112,7 @@ export default class PointerTracker {
      * @param element Element to monitor.
      * @param options
      */
-    constructor(_element: HTMLElement, { start, move, end, rawUpdates, avoidPointerEvents, }?: PointerTrackerOptions);
+    constructor(_element: HTMLElement, { start, move, end, rawUpdates, avoidPointerEvents, eventListenerOptions, }?: PointerTrackerOptions);
     /**
      * Remove all listeners.
      */