JavaScript：拦截a链接非相同域名的点击跳转-基础版

基础写法

第一种写法：

// currentDomain当前页面的域名
const currentDomain = window.location.hostname;

document.addEventListener('click', function(event) {
    const link = event.target.closest('a');
    if (!link) return;
    
    const arrUrl = link.href.split("/");
    const jumpHost = (arrUrl[2] || "").split(":")[0];
    
    if (currentDomain !== jumpHost) {
        // to do something
        alert("域名不一致");
        event.preventDefault();
    }
});

注意：

1. 这里的closest()方法是用来查找符合条件的第一个祖先元素的，所以可以直接使用event.target.closest('a')来获取到点击的链接元素。
2. 这里的判断域名是否一致的逻辑是：如果跳转的域名和当前域名不一致，则提示并阻止默认行为。
3. 这里的域名判断是通过获取跳转链接的域名，然后判断是否和当前域名一致。如果不一致，则提示并阻止默认行为。

第二种写法：

/* 进阶写法 */
document.addEventListener('click', function(event) {
    const link = event.target.closest('a');
    if (!link) return;
    
    // 此处不同
    const jumpHost = new URL(link.href).hostname;
    
    if (currentDomain !== jumpHost) {
        alert("域名不一致");
        event.preventDefault();
    }
});

第三种写法：

document.addEventListener('click', function(event) {
  // 检查事件目标是否是链接元素或包含在链接元素内
  let link = event.target.closest('a');
  if (!link) return; // 如果不是链接，不做处理

  // 获取链接的目标URL
  const targetUrl = new URL(link.href);
  
  // 检查目标URL的域名是否与当前域名相同
  if (targetUrl.hostname !== window.location.hostname) {
    // 阻止默认行为（即阻止跳转）
    event.preventDefault();
    // 显示提示信息
    alert(`安全提示：您即将访问外部网站：${targetUrl.href}\n\n为了您的信息安全，请确认是否继续。`);
    // 可选：可以在这里添加额外的处理逻辑，比如记录用户行为等
    console.log('用户被阻止访问非同源链接:', targetUrl.href);
  }
});