Electron中图片形式外链无法在外部浏览器打开，求解决方案

我太懂这个坑了！之前写Electron应用时也踩过——文字链接好好的能跳外部浏览器，一点带图片的链接就直接在Electron窗口里打开了，简直头大😅

问题出在哪？ #

原来的代码只检查了event.target.tagName === 'A'，但点击<a>标签里的图片时，触发点击事件的元素是<img>而不是<a>，自然就跳过了你的拦截逻辑，直接走默认的跳转行为了。

解决方法：向上查找父级<a>标签 #

我们需要修改事件监听逻辑，不管点击的是<a>本身还是它的子元素，都找到对应的<a>标签再做判断。这里有两种简洁的实现方式：

方法1：使用Element.closest()（推荐）

这个方法会从当前元素开始往上找，直到找到匹配的<a>标签（包括元素自身），代码超简洁：

const { shell } = require('electron');

document.addEventListener('click', function(event) {
  // 找到最近的<a>祖先元素
  const link = event.target.closest('a');
  
  if (link && link.href.startsWith('http')) {
    event.preventDefault();
    shell.openExternal(link.href);
  }
});

方法2：手动遍历父节点（兼容旧版本）

如果你的Electron版本比较老（对应Chromium版本不支持closest），可以手动遍历DOM树找父节点：

const { shell } = require('electron');

document.addEventListener('click', function(event) {
  let currentElement = event.target;
  
  // 往上遍历直到找到<a>标签或者到根节点
  while (currentElement && currentElement.tagName !== 'A') {
    currentElement = currentElement.parentNode;
  }
  
  if (currentElement && currentElement.href.startsWith('http')) {
    event.preventDefault();
    shell.openExternal(currentElement.href);
  }
});

测试一下 #

用你提供的图片链接代码测试：

<a href="https://www.stackoverflow.com">
  <img src='image1.jpg' alt="Stack Overflow link">
</a>

现在点击图片，应该会直接唤起你的默认外部浏览器打开链接啦！

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