feat(useMousePressed): add capture option (#3392)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
vueuse · Oct 7, 2023 · d5c81b3 · d5c81b3
1 parent 87ea324
commit d5c81b3
Showing 1 changed file with 18 additions and 9 deletions.
diff --git a/packages/core/useMousePressed/index.ts b/packages/core/useMousePressed/index.ts
@@ -21,6 +21,14 @@ export interface MousePressedOptions extends ConfigurableWindow {
    */
   drag?: boolean
 
+  /**
+   * Add event listerners with the `capture` option set to `true`
+   * (see [MDN](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#capture))
+   *
+   * @default false
+   */
+  capture?: boolean
+
   /**
    * Initial values
    *
@@ -44,6 +52,7 @@ export function useMousePressed(options: MousePressedOptions = {}) {
   const {
     touch = true,
     drag = true,
+    capture = false,
     initialValue = false,
     window = defaultWindow,
   } = options
@@ -69,23 +78,23 @@ export function useMousePressed(options: MousePressedOptions = {}) {
 
   const target = computed(() => unrefElement(options.target) || window)
 
-  useEventListener(target, 'mousedown', onPressed('mouse'), { passive: true })
+  useEventListener(target, 'mousedown', onPressed('mouse'), { passive: true, capture })
 
-  useEventListener(window, 'mouseleave', onReleased, { passive: true })
-  useEventListener(window, 'mouseup', onReleased, { passive: true })
+  useEventListener(window, 'mouseleave', onReleased, { passive: true, capture })
+  useEventListener(window, 'mouseup', onReleased, { passive: true, capture })
 
   if (drag) {
-    useEventListener(target, 'dragstart', onPressed('mouse'), { passive: true })
+    useEventListener(target, 'dragstart', onPressed('mouse'), { passive: true, capture })
 
-    useEventListener(window, 'drop', onReleased, { passive: true })
-    useEventListener(window, 'dragend', onReleased, { passive: true })
+    useEventListener(window, 'drop', onReleased, { passive: true, capture })
+    useEventListener(window, 'dragend', onReleased, { passive: true, capture })
   }
 
   if (touch) {
-    useEventListener(target, 'touchstart', onPressed('touch'), { passive: true })
+    useEventListener(target, 'touchstart', onPressed('touch'), { passive: true, capture })
 
-    useEventListener(window, 'touchend', onReleased, { passive: true })
-    useEventListener(window, 'touchcancel', onReleased, { passive: true })
+    useEventListener(window, 'touchend', onReleased, { passive: true, capture })
+    useEventListener(window, 'touchcancel', onReleased, { passive: true, capture })
   }
 
   return {