如何在JavaScript中覆盖浏览器的Undo快捷键命令？

你之前的代码问题出在对e.key = "Undo"的理解上：这个键值仅对应物理键盘上的专用Undo按键，而日常使用的Cmd+Z（Mac）或Ctrl+Z（Windows/Linux）组合键并不会触发该键值，这也是浏览器默认行为没被阻止的核心原因。

下面是基于标准非废弃API的现代解决方案，兼容所有主流浏览器（包括Arc）：

// 用addEventListener替代直接赋值，更符合现代事件监听规范
document.addEventListener('keydown', handleKeyboardShortcuts);

function handleKeyboardShortcuts(e) {
  // 判断撤销组合键：Cmd+Z（Mac）或 Ctrl+Z（其他平台）
  const isUndo = (e.metaKey || e.ctrlKey) && !e.shiftKey && e.key.toLowerCase() === 'z';
  // 判断重做组合键：Cmd+Shift+Z（Mac）或 Ctrl+Y/Ctrl+Shift+Z（其他平台）
  const isRedo = (e.metaKey || e.ctrlKey) && 
    ((e.shiftKey && e.key.toLowerCase() === 'z') || e.key.toLowerCase() === 'y');

  if (isUndo) {
    // 阻止浏览器默认行为+停止事件冒泡，确保只触发你的撤销逻辑
    e.preventDefault();
    e.stopPropagation();
    undo(); // 替换为你的撤销函数
  } else if (isRedo) {
    e.preventDefault();
    e.stopPropagation();
    redo(); // 替换为你的重做函数
  }
}

关键说明： #

• 使用e.metaKey（对应Mac的Cmd键）和e.ctrlKey（对应Windows/Linux的Ctrl键）跨平台识别修饰键，这两个属性都是MDN推荐的标准属性，无废弃风险。
• 同时检查e.key.toLowerCase() === 'z'确保目标按键正确，忽略大小写避免Caps Lock干扰。
• 调用e.stopPropagation()是额外保险，部分浏览器会在事件冒泡阶段触发默认行为，停止冒泡能进一步确保你的逻辑优先执行。
• 用addEventListener替代document.onkeydown，方便后续移除事件监听，也更符合现代JS开发实践。

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