如何用alert弹窗替代beforeunload离开警告，阻止未勾选用户跳转

要实现未勾选复选框时阻止跳转并显示自定义alert，同时兼容无法直接修改<a>标签的限制，可以按以下步骤处理：

核心思路 #

1. 移除原beforeunload的默认提示逻辑（它无法自定义弹窗内容）
2. 针对表单提交、链接点击这两种主动跳转场景，分别拦截并显示自定义提示
3. 保留对页面卸载（刷新/关闭）的拦截（受浏览器限制，只能用默认提示）

修改后的代码 #

HTML（保持不变） #

<form>
  <label>
  <input type="checkbox" name="Check1" id="Check1" value="Check1" value="yes" required>
  this is the first checkbox</label>

  <button>continue</button>
</form>

<a href="https://example.com">outer link</a>

JavaScript #

function isChecked() {
  return document.getElementById("Check1").checked;
}

// 拦截表单提交
document.querySelector('form').addEventListener('submit', function(e) {
  if (!isChecked()) {
    e.preventDefault(); // 阻止表单提交
    alert('必须勾选复选框才能继续');
  }
});

// 拦截所有<a>标签点击（事件委托，无需修改原标签）
document.addEventListener('click', function(e) {
  // 判断点击目标是否是<a>标签
  if (e.target.tagName === 'A' && !isChecked()) {
    e.preventDefault(); // 阻止链接跳转
    alert('必须勾选复选框才能继续');
  }
});

// 拦截页面卸载（刷新/关闭），受浏览器限制只能用默认提示
window.addEventListener('beforeunload', function(e) {
  if (!isChecked()) {
    e.preventDefault();
    e.returnValue = ''; // 触发浏览器默认的"是否离开"提示
  }
});

关键说明 #

• 事件委托处理链接：通过监听document的点击事件，自动捕获所有<a>标签的点击行为，无需修改原标签的硬编码。
• 表单提交拦截：直接监听表单的submit事件，阻止未勾选时的提交动作。
• 页面卸载限制：浏览器出于安全考虑，禁止在beforeunload事件中自定义弹窗内容，因此刷新/关闭页面时只能显示浏览器默认提示。

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