Merge pull request #12 from xwcoder/hotfix/click-anchor

xwcoder · web-flow · commit b1bf9a31c7ee · 2023-11-12T13:57:40.000+08:00
fix: capture the click event of anchor with child element
diff --git a/src/base/browser/dom.ts 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
@@ -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)
