Ver Fonte

ref: onInteraction now supports evt options

Sven há 1 ano atrás
pai
commit
6369e20f67
3 ficheiros alterados com 14 adições e 9 exclusões
  1. 1 0
      .eslintrc.cjs
  2. 1 1
      src/features/layout.ts
  3. 12 8
      src/utils/dom.ts

+ 1 - 0
.eslintrc.cjs

@@ -9,6 +9,7 @@ module.exports = {
     "*.user.js",
     "*.map",
     "dist/**",
+    "test.ts",
   ],
   extends: [
     "eslint:recommended",

+ 1 - 1
src/features/layout.ts

@@ -379,7 +379,7 @@ export async function addScrollToActiveBtn() {
         });
       };
 
-      onInteraction(linkElem, scrollToActiveInteraction);
+      onInteraction(linkElem, scrollToActiveInteraction, { capture: true });
 
       linkElem.appendChild(imgElem);
       containerElem.appendChild(linkElem);

+ 12 - 8
src/utils/dom.ts

@@ -136,16 +136,20 @@ function clearNode(element: Element) {
   element.parentNode!.removeChild(element);
 }
 
-/** Adds interaction listeners to the passed element in an accessible way - set {@linkcode once} to true to remove the listeners after the first interaction */
-export function onInteraction<TElem extends HTMLElement>(elem: TElem, listener: (evt: MouseEvent | KeyboardEvent) => void, once = false) {
+/**
+ * Adds generic, accessible interaction listeners to the passed element
+ * @param listenerOptions Set {@linkcode listenerOptions} to configure the listener
+ */
+export function onInteraction<TElem extends HTMLElement>(elem: TElem, listener: (evt: MouseEvent | KeyboardEvent) => void, listenerOptions?: AddEventListenerOptions) {
   const proxListener = (e: MouseEvent | KeyboardEvent) => {
-    if(e instanceof KeyboardEvent && !["Enter", " ", "Space", "Spacebar"].includes(e.key))
+    if(e instanceof KeyboardEvent && !(["Enter", " ", "Space", "Spacebar"].includes(e.key)))
       return;
-    e.stopPropagation();
-    once && elem.removeEventListener("click", proxListener);
-    once && elem.removeEventListener("keydown", proxListener);
+    e.preventDefault();
+    e.stopImmediatePropagation();
+    listenerOptions?.once && e.type === "keydown" && elem.removeEventListener("click", proxListener, listenerOptions);
+    listenerOptions?.once && e.type === "click" && elem.removeEventListener("keydown", proxListener, listenerOptions);
     listener(e);
   };
-  elem.addEventListener("click", proxListener);
-  elem.addEventListener("keydown", proxListener);
+  elem.addEventListener("click", proxListener, listenerOptions);
+  elem.addEventListener("keydown", proxListener, listenerOptions);
 }