求助：如何实现点击指定按钮时弹出保存前Alert提示文本

你需求的提示框效果示例如下：

原生JavaScript实现（无框架依赖，新手入门首选） #

不需要引入任何第三方库，直接用浏览器自带API即可实现，步骤如下：

• 在HTML中定义触发提示的目标按钮
• 为按钮绑定点击事件，事件触发时调用confirm()方法弹出双按钮确认框
• 根据用户的选择（确认/取消）判断是否执行后续保存逻辑
  完整代码示例：

<!-- 页面按钮 -->
<button id="saveBtn">保存内容</button>

<script>
// 获取按钮DOM节点
const saveButton = document.getElementById('saveBtn')
// 绑定点击事件
saveButton.addEventListener('click', () => {
  // 弹出确认提示，返回值为true代表用户点击确认，false代表点击取消
  const userConfirmed = confirm('你确定要保存当前修改吗？修改后将无法恢复到之前的版本。')
  if (userConfirmed) {
    // 此处写入保存逻辑，比如提交表单、调用后端保存接口等
    alert('内容保存成功')
  } else {
    // 点击取消的逻辑，无需求可以直接省略
    return
  }
})
</script>

主流前端框架实现示例 #

核心逻辑和原生实现一致，只是绑定事件的写法跟随框架规范调整即可：

Vue 3 实现 #

<template>
  <button @click="handleSave">保存内容</button>
</template>

<script setup>
const handleSave = () => {
  const userConfirmed = confirm('你确定要保存当前修改吗？修改后将无法恢复到之前的版本。')
  if (userConfirmed) {
    // 执行保存逻辑
    console.log('开始提交保存请求')
  }
}
</script>

React 实现 #

function SavePage() {
  const handleSave = () => {
    const userConfirmed = confirm('你确定要保存当前修改吗？修改后将无法恢复到之前的版本。')
    if (userConfirmed) {
      // 执行保存逻辑
      console.log('开始提交保存请求')
    }
  }

  return (
    <div>
      <button onClick={handleSave}>保存内容</button>
    </div>
  )
}

内容的提问来源于stack exchange，提问作者Nor Hanani Osman