Electron中嵌套div的a标签无法触发shell.openExternal打开外链

DOM事件触发时event.target指向的是用户实际点击的最内层节点，当a标签内嵌套div、img等子元素时，点击命中的是子元素而非a标签本身，原有直接判断event.target.tagName === 'A'的逻辑无法匹配，导致功能失效。

使用DOM原生的closest()方法，从点击的目标节点开始沿DOM树向上查找，匹配最近的a标签祖先节点（包含节点自身），再对匹配到的节点做href规则校验即可，不需要修改现有HTML结构。

修复后的事件监听代码：

document.addEventListener('click', function (event) {
  // 向上查找最近的a标签
  const anchorEl = event.target.closest('a')
  if (anchorEl && anchorEl.href.startsWith('http')) {
    event.preventDefault()
    shell.openExternal(anchorEl.href)
  }
})

额外注意事项 #

• closest()方法兼容所有现代浏览器及Electron内置的Chromium版本，无需额外引入兼容补丁
• 若项目开启了contextIsolation（Electron 12及以上版本默认开启），不要直接在渲染进程调用shell模块，需通过预加载脚本暴露IPC通信通道，由主进程接收链接参数后调用shell.openExternal，符合Electron安全开发规范
• 可根据业务需求追加判断规则，比如过滤站点内部路由链接、匹配指定域名规则等

内容的提问来源于stack exchange，提问作者Fefe_du_973