如何在JavaScript中检测prompt窗口的Esc按键/取消按钮操作？

问题根源 #

1. 当用户点击取消或按Esc关闭prompt时，prompt()会返回null，你用+强制转换后会得到0
2. 你的判断条件typeof userAnswer === "number" && userAnswer <= this.answers.length会成立（0是数字且小于等于5），导致answers[0]被意外递增
3. 另外，document.onkeydown在prompt弹出期间完全不会触发——因为prompt是模态对话框，会阻塞所有JS执行，直到对话框关闭，所以这个事件监听完全无效

修正后的代码 #

answers: new Array(5).fill(0),
registerNewAnswer() {
  // 先获取原始返回值，不急于转换类型
  const rawAnswer = prompt(
    `${this.question}\n${this.options.join("\n")}\n(Write option number)`
  );

  // 如果用户取消/按Esc，直接退出函数
  if (rawAnswer === null) return;

  // 转换为数字并验证有效性
  const userAnswer = +rawAnswer;
  // 确保是有效数字，且输入在1-5范围内（对应选项序号）
  if (!isNaN(userAnswer) && userAnswer > 0 && userAnswer <= this.answers.length) {
    // 若输入1对应数组第一个元素（索引0），则改为this.answers[userAnswer - 1]++
    this.answers[userAnswer]++;
  }

  this.displayResult();
  this.displayResult("string");
},

关键修改点 #

• 先判断rawAnswer === null，直接退出函数，避免后续无效处理
• 用!isNaN(userAnswer)替代typeof userAnswer === "number"，排除空字符串转成0的无效情况
• 添加userAnswer > 0的判断，彻底避免0触发数组元素递增
• 额外提示：如果你的选项序号1-5对应数组索引0-4，需要把this.answers[userAnswer]++改成this.answers[userAnswer - 1]++，否则输入5会导致数组越界扩展

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