From 183f422f2a8ae21a5bfe9afa18132fabe801b4d6 Mon Sep 17 00:00:00 2001
From: creep <creepcn@gmail.com>
Date: Sun, 12 Nov 2023 13:54:07 +0800
Subject: [PATCH] fix: capture the click event of anchor with child element

---
 src/base/browser/dom.ts                          | 13 +++++++++++++
 src/ui/apps/reader/MainPanel/Article/content.tsx |  9 ++++++---
 2 files changed, 19 insertions(+), 3 deletions(-)
 create mode 100644 src/base/browser/dom.ts

diff --git a/src/base/browser/dom.ts b/src/base/browser/dom.ts
new file mode 100644
index 0000000..82a2261
--- /dev/null
+++ b/src/base/browser/dom.ts
@@ -0,0 +1,13 @@
+export const getAnchor = (el: HTMLElement): HTMLAnchorElement | null => {
+  let parent: HTMLElement | null = el
+
+  while (parent && parent !== document.body) {
+    if (parent instanceof HTMLAnchorElement) {
+      return parent
+    }
+
+    parent = parent.parentElement
+  }
+
+  return null
+}
diff --git a/src/ui/apps/reader/MainPanel/Article/content.tsx b/src/ui/apps/reader/MainPanel/Article/content.tsx
index cd7eebc..1498a5e 100644
--- a/src/ui/apps/reader/MainPanel/Article/content.tsx
+++ b/src/ui/apps/reader/MainPanel/Article/content.tsx
@@ -5,6 +5,7 @@ import { observer } from 'mobx-react-lite'
 import { store } from '@/ui/store'
 import { format as formatTime } from '@/base/common/date'
 import { openExternal } from '@/base/browser/shell'
+import { getAnchor } from '@/base/browser/dom'
 
 const { readerStore } = store
 
@@ -81,14 +82,16 @@ function Content() {
 
   useEffect(() => {
     const el = containerRef.current
+
     const handler = (e: MouseEvent) => {
-      const { target } = e
-      if (!(target instanceof HTMLAnchorElement) || !target.href) {
+      const anchor = getAnchor(e.target as HTMLElement)
+
+      if (!(anchor instanceof HTMLAnchorElement) || !anchor.href) {
         return
       }
 
       e.preventDefault()
-      openExternal(target.href)
+      openExternal(anchor.href)
     }
 
     el?.addEventListener('click', handler)