如何用Javascript在点击带target属性的HTML<a>标签离开页面前调用函数

问题原因排查 #

你的代码没有达到预期有三个核心原因：

• 第二种写法的事件名错误：addEventListener绑定事件时不需要加on前缀，你写的onbeforeunload是无效事件名，正确应为beforeunload
• 现代浏览器对beforeunload事件有严格规范限制：不支持自定义提示文本，必须给事件对象的returnValue赋值才能触发系统默认的离开提示，你第一种写法直接返回字符串的逻辑在新版浏览器里会失效
• 带target属性的<a>标签如果是打开新窗口（比如target="_blank"），当前页面不会触发卸载流程，所以beforeunload事件根本不会执行，必须单独拦截这类标签的点击行为

正确实现方案 #

1. 修正beforeunload事件写法（处理当前页跳转、刷新、关闭场景）

// 方式1：DOM0级绑定
window.onbeforeunload = function(e) {
  // 替换为你自己的未保存修改判断逻辑
  const hasUnsavedChanges = true;
  if (hasUnsavedChanges) {
    e.preventDefault();
    // 兼容不同浏览器
    e.returnValue = '';
    return '';
  }
};

// 方式2：DOM2级事件绑定
window.addEventListener('beforeunload', (e) => {
  const hasUnsavedChanges = true;
  if (hasUnsavedChanges) {
    e.preventDefault();
    e.returnValue = '';
    return '';
  }
});

注意：beforeunload事件里不能调用alert、confirm、prompt这类弹窗方法，现代浏览器会直接拦截这些方法执行。

2. 单独拦截带target属性的a标签点击（处理新窗口跳转场景）

如果是静态a标签，可以直接批量绑定事件：

document.querySelectorAll('a[target]').forEach(aTag => {
  aTag.addEventListener('click', (e) => {
    // 替换为你自己的未保存修改判断逻辑
    const hasUnsavedChanges = true;
    if (hasUnsavedChanges) {
      const allowLeave = confirm('你有未保存的修改，确定要离开当前页面吗？');
      if (!allowLeave) {
        e.preventDefault();
        e.stopPropagation();
        return false;
      }
    }
  })
})

如果a标签是动态生成的，用事件委托实现：

document.addEventListener('click', (e) => {
  const targetATag = e.target.closest('a[target]');
  if (targetATag) {
    const hasUnsavedChanges = true;
    if (hasUnsavedChanges) {
      const allowLeave = confirm('你有未保存的修改，确定要离开当前页面吗？');
      if (!allowLeave) {
        e.preventDefault();
        e.stopPropagation();
      }
    }
  }
})

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