window.confirm弹窗Cancel按钮回车返回true异常：是否为Bug及解决方案问询

一、这是浏览器的实现Bug吗？ #

没错，这确实属于浏览器实现层面的问题，而且是跨Chrome、Firefox、Safari的一致性异常。

翻遍相关规范文档，只明确了window.confirm()的核心逻辑：用户点击确认返回true，取消返回false，但并没有详细规定键盘事件与按钮的绑定规则。不过从常规的用户交互逻辑来说，当聚焦Cancel按钮时，无论是按空格还是回车，都应该触发取消操作（返回false）——所以当前主流浏览器的这个表现完全不符合预期，属于历史遗留的实现疏漏，可以认定是Bug。

二、有没有可行的规避方案？ #

原生弹窗的行为我们没法直接修改，所以最稳妥的方式是自己实现一个自定义确认弹窗，完全替代原生的window.confirm()，以此控制所有交互逻辑。

具体实现方案： #

我给你写了一个简单的示例，用Promise封装，模拟原生弹窗的异步体验，同时严格控制键盘交互：

function customConfirm(message) {
  return new Promise((resolve) => {
    // 构建弹窗DOM
    const modal = document.createElement('div');
    modal.style.cssText = `
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 24px;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.15);
      z-index: 10000;
      text-align: center;
      font-family: system-ui, sans-serif;
    `;
    
    // 消息文本
    const msgEl = document.createElement('p');
    msgEl.textContent = message;
    msgEl.style.marginBottom = '20px';
    
    // 按钮容器
    const btnWrap = document.createElement('div');
    
    // OK按钮
    const okBtn = document.createElement('button');
    okBtn.textContent = 'OK';
    okBtn.style.cssText = `
      padding: 8px 16px;
      margin-right: 12px;
      border: none;
      border-radius: 4px;
      background: #0071e3;
      color: white;
      cursor: pointer;
    `;
    
    // Cancel按钮
    const cancelBtn = document.createElement('button');
    cancelBtn.textContent = 'Cancel';
    cancelBtn.style.cssText = `
      padding: 8px 16px;
      border: 1px solid #d1d1d6;
      border-radius: 4px;
      background: #f5f5f7;
      color: #1d1d1f;
      cursor: pointer;
    `;
    
    // 点击逻辑
    okBtn.addEventListener('click', () => {
      document.body.removeChild(modal);
      resolve(true);
    });
    
    cancelBtn.addEventListener('click', () => {
      document.body.removeChild(modal);
      resolve(false);
    });
    
    // 键盘事件处理：严格对应聚焦按钮的行为
    modal.addEventListener('keydown', (e) => {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        if (document.activeElement === okBtn) {
          okBtn.click();
        } else if (document.activeElement === cancelBtn) {
          cancelBtn.click();
        }
      }
    });
    
    // 组装并挂载弹窗
    btnWrap.appendChild(okBtn);
    btnWrap.appendChild(cancelBtn);
    modal.appendChild(msgEl);
    modal.appendChild(btnWrap);
    document.body.appendChild(modal);
    
    // 默认聚焦OK按钮，和原生弹窗保持一致
    okBtn.focus();
  });
}

// 使用方式和原生confirm类似，只是基于Promise
customConfirm('你确定要删除这条内容吗？').then((result) => {
  console.log('用户选择结果：', result);
  // 这里处理你的业务逻辑
});

这个自定义弹窗完全解决了原生的问题：不管是聚焦Cancel按钮按回车还是空格，都会正确返回false，和用户的预期完全一致。你还可以根据自己的产品风格调整弹窗样式，比如添加背景遮罩、动画效果等，体验上甚至能比原生弹窗更好。

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