检测外部链接点击 JavaScript

在网页开发过程中，我们经常需要检测用户是否点击了外部链接。这种需求可以通过 JavaScript 来实现。本文将介绍如何检测外部链接的点击事件。

方案一：使用正则表达式判断链接是否为外部链接

我们可以判断链接的 href 属性中是否包含 http 或 https 等外部链接的特有协议头来判断用户是否点击了外部链接。

let links = document.getElementsByTagName('a');
for (let i = 0; i < links.length; i++) {
  links[i].addEventListener('click', function(event) {
    if (this.href.match(/^https?:\/\//i)) {
      // 是外部链接，阻止默认行为
      event.preventDefault();
      console.log('External link clicked:', this.href);
    }
  });
}

上述代码中，我们遍历了所有的链接元素，通过监听鼠标点击事件 click，对于匹配到的外部链接，我们阻止了默认行为，并在控制台打印了信息。

需要注意的是，在使用正则表达式判断链接是否为外部链接时，应该使用 ^ 来匹配字符串开头，这样可以排除一些误判，比如 javascript: 等协议头。

方案二：使用 HTML5 新特性 rel="noopener noreferrer" 属性

在 HTML5 中，可以使用新特性 rel="noopener noreferrer" 属性来防止链接劫持。此属性可以有效地解决外部链接被劫持的安全问题。

<a href="https://example.com" target="_blank" rel="noopener noreferrer">External Link</a>

使用此属性的方式，不需要在 JavaScript 代码中添加任何监听事件，就能有效地防止外部链接被劫持。

结论

为了保障用户在使用网站时的安全和隐私，检测外部链接的点击事件变得非常必要。以上两种方案都能够有效应对这个问题，可以根据实际需要来选择。