浏览代码

feat: bubbling and prevent default configurable in onInteraction

Sv443 10 月之前
父节点
当前提交
6eb1cab2a2
共有 1 个文件被更改,包括 16 次插入9 次删除
  1. 16 9
      src/utils/input.ts

+ 16 - 9
src/utils/input.ts

@@ -1,29 +1,36 @@
 const interactionKeys = ["Enter", " ", "Space"];
 
+type ListenerOpts = AddEventListenerOptions & {
+  preventDefault?: boolean;
+  stopPropagation?: boolean;
+};
+
 /**
  * Adds generic, accessible interaction listeners to the passed element.  
  * All listeners have the default behavior prevented and stop propagation (for keyboard events only as long as the captured key is valid).
  * @param listenerOptions Provide a {@linkcode listenerOptions} object to configure the listeners
  */
-export function onInteraction<TElem extends HTMLElement>(elem: TElem, listener: (evt: MouseEvent | KeyboardEvent) => void, listenerOptions?: AddEventListenerOptions) {
+export function onInteraction<TElem extends HTMLElement>(elem: TElem, listener: (evt: MouseEvent | KeyboardEvent) => void, listenerOptions?: ListenerOpts) {
+  const { preventDefault = true, stopPropagation = true, ...listenerOpts } = listenerOptions ?? {};
+
   const proxListener = (e: MouseEvent | KeyboardEvent) => {
     if(e instanceof KeyboardEvent) {
       if(interactionKeys.includes(e.key)) {
-        e.preventDefault();
-        e.stopPropagation();
+        preventDefault && e.preventDefault();
+        stopPropagation && e.stopPropagation();
       }
       else return;
     }
     else if(e instanceof MouseEvent) {
-      e.preventDefault();
-      e.stopPropagation();
+      preventDefault && e.preventDefault();
+      stopPropagation && e.stopPropagation();
     }
 
     // clean up the other listener that isn't automatically removed if `once` is set
-    listenerOptions?.once && e.type === "keydown" && elem.removeEventListener("click", proxListener, listenerOptions);
-    listenerOptions?.once && e.type === "click" && elem.removeEventListener("keydown", proxListener, listenerOptions);
+    listenerOpts?.once && e.type === "keydown" && elem.removeEventListener("click", proxListener, listenerOpts);
+    listenerOpts?.once && e.type === "click" && elem.removeEventListener("keydown", proxListener, listenerOpts);
     listener(e);
   };
-  elem.addEventListener("click", proxListener, listenerOptions);
-  elem.addEventListener("keydown", proxListener, listenerOptions);
+  elem.addEventListener("click", proxListener, listenerOpts);
+  elem.addEventListener("keydown", proxListener, listenerOpts);
 }