如何在JavaScript中拦截链接上的回车键触发事件？

你遇到的问题是链接聚焦后按回车时，全局keypress事件没触发——这是因为浏览器会优先执行链接的默认跳转行为，且keypress在处理焦点元素按键时的兼容性不如keydown。不用给每个链接写href="javascript:..."，用事件委托就能批量处理所有链接，实现回车触发文件上传框的需求。

方案一：仅处理回车触发的场景 #

通过全局keydown事件监听，判断触发元素是链接且按下回车键，阻止默认跳转后触发文件上传：

<a href="#">this is link</a>
<a href="/test">another link</a>
<input type="file" id="fileInput" style="display: none;">

document.addEventListener('keydown', (e) => {
  // 确认触发元素是a标签，且按下的是回车键
  if (e.target.tagName === 'A' && e.key === 'Enter') {
    e.preventDefault(); // 阻止链接默认跳转行为
    // 触发隐藏的文件上传框点击
    document.getElementById('fileInput').click();
  }
});

方案二：同时处理鼠标点击和回车触发 #

链接聚焦后按回车本质上会触发click事件，直接监听全局click事件，就能统一处理所有链接的点击行为（包括回车触发的）：

document.addEventListener('click', (e) => {
  if (e.target.tagName === 'A') {
    e.preventDefault(); // 阻止链接跳转
    document.getElementById('fileInput').click();
  }
});

这两种方式都无需修改每个链接的href，一次性覆盖页面所有链接，完全满足你的需求。

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