如何将alert与onclick事件结合？点击确定按钮触发自定义操作

嘿，我懂你的困扰——原生的alert弹窗是浏览器层面的模态对话框，它并不属于页面DOM的一部分，所以你直接用alert.onclick去绑定点击事件根本行不通，这就是为啥你的尝试没生效啦！

不过别担心，我们可以通过包装原生alert方法来实现需求，因为原生alert是阻塞式的：当弹窗弹出时，JS代码会暂停执行，直到用户点击「确定」关闭弹窗后，后续的代码才会继续运行。基于这个特性，我们有两种实用的解决方案：

方案1：全局重写alert（影响所有alert调用） #

如果你希望所有地方的alert弹窗关闭后都触发自定义操作，可以重写window.alert方法：

// 先保存原生的alert方法，避免覆盖后无法恢复
const originalAlert = window.alert;

// 重写alert函数
window.alert = function(message) {
  // 调用原生alert弹窗
  originalAlert(message);
  // 弹窗关闭后执行你的自定义操作
  console.log('Alert弹窗已关闭，触发自定义操作！');
  // 这里可以添加任何你需要的逻辑，比如发送请求、更新页面等
};

// 测试一下——3秒后弹出弹窗
setTimeout(() => {
  alert('这是一段延迟弹出的提示');
}, 3000);

方案2：封装自定义alert函数（仅影响特定弹窗） #

如果你只需要针对某个特定的弹窗触发操作，不想影响其他地方的alert，那就封装一个自己的弹窗函数：

function myCustomAlert(message) {
  // 调用原生alert
  window.alert(message);
  // 弹窗关闭后执行自定义逻辑
  console.log('特定弹窗已关闭，执行专属操作！');
}

// 使用这个自定义函数代替原生alert
setTimeout(() => {
  myCustomAlert('一段时间后弹出的专属弹窗');
}, 3000);

这两种方法都能完美实现你想要的效果，核心思路就是利用原生alert的阻塞特性，在弹窗关闭后执行后续代码。如果你的弹窗是第三方库触发的，方案1的全局重写会更适用，因为它能捕获所有调用window.alert的场景～

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