[fix] DOM Ready bug based on WebCell utility

stonelf · Jul 22, 2020 · 4f0d6cb · 4f0d6cb
1 parent e0fd8a2
commit 4f0d6cb
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -14,6 +14,9 @@
     "[email protected]"
   ],
   "main": "source/index.html",
+  "dependencies": {
+    "web-cell": "^2.1.2"
+  },
   "devDependencies": {
     "husky": "^4.2.5",
     "lint-staged": "^10.2.11",

diff --git a/source/index.ts b/source/index.ts
@@ -1,6 +1,8 @@
+import { documentReady, delegate } from "web-cell/source/utility/event";
+
 import { ping } from "./data/config";
 
-document.addEventListener("DOMContentLoaded", () => {
+documentReady.then(() => {
   const navbarCollapse = document.querySelector<HTMLDivElement>(
       ".navbar-collapse"
     ),
@@ -26,14 +28,17 @@ document.addEventListener("DOMContentLoaded", () => {
   /**
    * 导航项目点击切换
    */
-  navbarCollapse.onclick = (event) => {
-    const item = (event.target as HTMLElement).closest(".nav-item");
-
-    if (!item || !item.querySelector("a").href.startsWith("http")) return;
+  navbarCollapse.addEventListener(
+    "click",
+    delegate(".nav-item", (_, item) => {
+      if (!item.querySelector("a").href.startsWith("http")) return;
 
-    navbarCollapse.querySelector(".nav-item.active").classList.remove("active");
-    item.classList.add("active");
-  };
+      navbarCollapse
+        .querySelector(".nav-item.active")
+        .classList.remove("active");
+      item.classList.add("active");
+    })
+  );
   /**
    * 导航项目加载切换
    */