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 79450b6006269cdc17bfbfb4552222037349cad2..ea5336b11c4f174b4f1742d5decc1e2034cdb436 100644 (file)
--- 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
   }