如何防止“tel:”链接触发“beforeunload”事件？

Question

在用户通过执行以下操作刷新页面之前会出现一个弹出窗口：

window.addEventListener('beforeunload', function (e) {
  e.preventDefault();
  e.returnValue = '';
});

这按预期工作，但我不希望在用户单击

tel:

链接（例如

<a href="tel:[phone]">phone number</a>

）后出现弹出窗口。

我想我可以检测到对所有

tel:

链接的点击，如下所示：

const phoneLinks = document.querySelectorAll('a[href^="tel:"]');
phoneLinks.forEach((phoneLink) => {
  phoneLink.addEventListener('click', () => {
    // Not sure what I can do
  });
});

我为此设置了一个codepen，但我不确定如何实际解决问题：https://codepen.io/obliviga/pen/XWxYJQG

大家有什么想法吗？

Answer 1

向链接添加

target

属性，以便它们在新窗口中打开。

phoneLinks.forEach(link => link.addAttribute('target', '_blank'))

Answer 2

我在此线程中找到了解决方案：mailto 链接（在 chrome 中）正在触发 window.onbeforeunload - 我可以防止这种情况吗？

即使是电话联系，工作也充满魅力！