From: Ardis Lu <ardisglu@gmail.com>
Date: Wed, 30 Oct 2024 03:00:55 +0000 (-0700)
Subject: Stop event propagation instead of specifically handling it
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=2ba64d17c12a1f3e7ac104fd31aa5c2a09cc392f;p=ardislu.dev

Stop event propagation instead of specifically handling it

This pattern is more idiomatic and self-contained, which is easier to maintain.
---

diff --git a/script.js b/script.js
index 79450b6..ea5336b 100644
--- a/script.js
+++ b/script.js
@@ -293,6 +293,7 @@ document.addEventListener('keydown', e => {
 /* Implement "skip to main" button */
 document.querySelector('#skip-to-main').addEventListener('click', e => {
   e.preventDefault();
+  e.stopPropagation(); // Block bubbling up to document-wide click handler for client-side routing
   document.querySelector('main').querySelector('a')?.focus(); // Assumes first focusable element is always <a>
 });
 
@@ -396,7 +397,7 @@ function route(href) {
 /* Set event handlers for client-side routing. */
 globalThis.addEventListener('popstate', _ => showPage(location.pathname));
 document.addEventListener('click', e => {
-  if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || e.target.id === 'skip-to-main') {
+  if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
     return; // Use default behavior if any keyboard modifier is applied to the click or it's a special link
   }