From 039bf024e29eb08a9749314421fb3c76784b8838 Mon Sep 17 00:00:00 2001
From: Ardis Lu <ardisglu@gmail.com>
Date: Wed, 27 Nov 2024 22:23:00 -0800
Subject: [PATCH] Use one global click handler instead of individual handlers

This pattern allows downstream code to more easily override the handler with stopPropagation
---
 index.html | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index f1ecd46..615c9f3 100644
--- a/index.html
+++ b/index.html
@@ -171,7 +171,7 @@
   </main>
 
   <script>
-    const routers = document.querySelectorAll('[data-router]');
+    const routers = Array.from(document.querySelectorAll('[data-router]')); // Put into array to use .includes
     const content = document.querySelector('section');
     const pages = document.querySelectorAll('[data-page]');
 
@@ -214,16 +214,17 @@
     }
 
     // Set event handlers
-    for (const router of routers) {
-      router.addEventListener('click', e => {
-        if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
-          return; // Use default behavior if any keyboard modifier is applied to the click
-        }
+    addEventListener('click', e => {
+      if (!routers.includes(e.target)) {
+        return;
+      }
+      if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
+        return; // Use default behavior if any keyboard modifier is applied to the click
+      }
 
-        e.preventDefault();
-        route(e.target.dataset.route);
-      });
-    }
+      e.preventDefault();
+      route(e.target.dataset.route);
+    });
     addEventListener('popstate', _ => showPage(location.pathname.substring(1)));
 
     // Show the current URL (to support direct linking aka deep links)
-- 
2.47.3