javascript - Electron 中的外部图像链接无法在外部浏览器中打开

Question

我使用此代码在 Electron 之外的浏览器中打开外部链接。如果在目的地之后写入文本，则效果很好:

 let shell = require('electron').shell
document.addEventListener('click', function (event) {
  if (event.target.tagName === 'A' && event.target.href.startsWith('http')) {
    event.preventDefault()
    shell.openExternal(event.target.href)
  }
})

但是，如果将图像设置为链接，则它根本不起作用并在 Electron 浏览器中打开:

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

如何获取要在 Electron 的外部浏览器中打开的图像链接？

Answer 1

这里的问题是您正在监听文档上的点击，然后仅检查 event.target。正如您所发现的，如果单击发生在链接内的子元素(例如图像)上，则 event.target 指向该子元素，并且您不会检测到链接已被点击。

这是 jQuery 派上用场的地方之一。类似于 $(document).on('click', 'a', ...)处理起来相当简单。

但是您不必使用 jQuery。由于 Electron 使用 Chromium，因此点击事件有一个名为 path 的非标准属性。该属性是一个父级数组，沿着 DOM 向上，一直到主体、文档，最后到达全局。您可以运行.find()在此数组上检查是否有任何元素恰好是链接，然后将该链接返回给您的事件处理程序进行处理。

看起来是这样的:

document.addEventListener('click', function(event) {
  const link = getLink(event);

  if (link) {
    event.preventDefault()
    alert('caught: ' + link.href);
  }
});

function getLink(event) {
  return event.path.find(($el) => {
    if ($el.tagName === 'A' && $el.href.startsWith('http')) {
      return true;
    }

    return false;
  });
}

<p>
  Image link:
  <a href="https://www.stackoverflow.com">
    <img src='https://placehold.it/100x100' />
  </a>
</p>

<p>
  Text link:
  <a href="https://example.com">Test link</a>
</p>