图片画廊Esc键跨浏览器行为异常，Firefox/Edge需按Shift问题求助

问题描述 #

实现了方向键切换图片画廊、Esc/上键返回初始页的功能，但Esc键仅在Chrome和Internet Explorer中正常生效，Firefox和Edge中需同时按下Shift键才能触发。

问题根源 #

1. 类型不匹配：代码中将数字类型的按键码与字符串'27'做比较，部分浏览器（如Firefox/Edge）未按Shift时返回的是数字27，与字符串'27'不相等；按下Shift时按键码的字符串形式匹配，才会触发逻辑。
2. 旧的window.event事件处理方式兼容性不足，未完全遵循标准事件对象规范。

修复后的代码 #

<script>
document.addEventListener('keydown', checkKeycode);

function checkKeycode(e) {
  // 统一获取按键码，兼容所有主流浏览器
  const key = e.keyCode || e.which;
  
  // Escape 键（数字27）
  if (key === 27) {
    window.location.href='<?php echo $_SESSION["reset"] ?>';
  }
  // 上方向键（数字38）
  if (key === 38) {
    window.location.href='<?php echo $_SESSION["reset"] ?>';
  }
  // 左方向键（数字37）
  if (key === 37) {
    window.location.href='?index=<?php echo $prev ?>';
  }
  // 右方向键（数字39）
  if (key === 39) {
    window.location.href='?index=<?php echo $next ?>';
  }
}
</script>

关键修复点 #

• 改用addEventListener绑定事件，符合现代浏览器标准，避免覆盖其他事件监听。
• 用e.keyCode || e.which统一获取按键码，兼容不同浏览器的事件对象实现。
• 将比较条件改为数字27而非字符串'27'，使用===严格相等运算符，确保类型匹配，消除触发异常。

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