window.confirm() 返回 undefined：按钮点了没反应的隐形陷阱

某次我在一个桌面 Webview 应用里收到反馈：「点删除没反应」。去看代码，逻辑清晰、没有语法错误；打开普通浏览器本地跑，弹窗一切正常。但用户那边就是「什么都没发生」——没有报错、没有网络请求、没有任何 UI 变化。这种「完全隐形」的失败比红屏报错还难排查。

现象

用户点击一个删除按钮：

没有弹出确认对话框
没有网络请求发出（服务端日志为空）
没有任何错误提示
浏览器 Console 无报错
同一份代码在桌面 Chrome 上运行完全正常

代码看起来毫无问题：

function onDelete(item) {
  const ok = window.confirm(`确认删除「${item.name}」？`)
  if (!ok) return
  doDelete(item)
}

根因

window.confirm() 在规范上返回 boolean——用户点 OK 返回 true，点取消返回 false。但在某些运行环境中，浏览器引擎会静默抑制这个原生对话框，直接返回 undefined，而不是抛出异常或给出任何警告。

于是：

window.confirm(...)  →  undefined（对话框被抑制，无任何提示）
!undefined           →  true
if (!ok) return      →  命中早返回
doDelete()           →  永远不会被调用

用户看到的「取消」路径和「对话框被吞掉」路径在 UI 上完全一致——因为两者都走了同一个 return。

坑：!undefined === true，整条链路被静默吞掉

window.confirm 被抑制时不报错、不抛异常，只是悄悄返回 undefined。!undefined 为 true，和用户主动点「取消」的效果一模一样——所以点按钮什么都不发生，Console 也干净。这是完全隐形的失败，极难在开发环境复现。

常见抑制场景：

Tauri 2 / Tauri 1 WebView（平台/配置不同，行为不一致）
Electron（部分沙箱或 nativeWindowOpen: false 配置）
<iframe> 缺少 sandbox="allow-modals" 属性
浏览器拦截非用户主动触发的弹窗（事件链中有异步操作时触发）
某些浏览器扩展或企业安全策略

正解

不要依赖 window.confirm() 做确认 UX。用 React 受控的 Portal 对话框替代，对话框状态是应用状态，不依赖浏览器原生 modal API，跨所有运行时行为一致。

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"
 
function MyComponent() {
  const [confirming, setConfirming] = useState<Item | null>(null)
 
  function onClickDelete(item: Item) {
    setConfirming(item)   // 打开对话框，不调用 window.confirm
  }
 
  async function onConfirmed() {
    const target = confirming
    setConfirming(null)
    if (!target) return
    await doDelete(target)
  }
 
  return (
    <>
      {items.map(item => (
        <button key={item.id} onClick={() => onClickDelete(item)}>删除</button>
      ))}
 
      <AlertDialog
        open={!!confirming}
        onOpenChange={(open) => { if (!open) setConfirming(null) }}
      >
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>确认删除「{confirming?.name}」？</AlertDialogTitle>
            <AlertDialogDescription>此操作不可撤销。</AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>取消</AlertDialogCancel>
            <AlertDialogAction onClick={() => void onConfirmed()}>
              确认删除
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  )
}

若短期内无法替换 UI，至少把 !ok 改为显式判断，避免 undefined 被当作 false：

function onDelete(item) {
  const ok = window.confirm(`确认删除「${item.name}」？`)
  if (ok === false) return        // 只有明确取消才放弃
  if (typeof ok !== 'boolean') {
    // 对话框被抑制，按业务决策：继续 / 降级提示 / 记录日志
    console.warn('window.confirm 被抑制，跳过确认直接执行')
  }
  doDelete(item)
}

正解：用 React 受控 AlertDialog 替换原生 confirm

React 受控对话框（shadcn AlertDialog / Radix / Headless UI）的状态是 useState，渲染是 Portal，完全不依赖浏览器 modal API——在 Tauri、Electron、iframe、各类移动端 WebView 里行为完全一致，且天然支持异步操作、Loading 态、错误处理。

排查验证

快速验证方法：在 window.confirm 调用后立刻 console.log(ok, typeof ok)。若输出 undefined 'undefined'，说明对话框被抑制，根因确认。

Tauri 开发者可改用 Tauri 官方 Dialog 插件（@tauri-apps/plugin-dialog），它调用原生系统对话框而非 WebView 的 window.confirm，不受 WebView 沙箱影响。

一句话外卖

window.confirm 的返回值不保证是 boolean——一旦宿主环境抑制弹窗就返回 undefined，而 !undefined 为 true，会把整条操作链路静默吞掉；别用原生 modal API 做确认门控，改用应用层受控对话框。