如何实现按下回车键触发元素点击事件，现有代码不生效如何解决

问题原因 #

1. 你当前将keydown事件绑定在了class="test"的div元素上，只有该元素处于聚焦状态时，按键事件才会被捕获触发回调。而普通div默认不支持聚焦，用户无主动点击聚焦的情况下，按回车键完全不会触发你写的判断逻辑。
2. keyCode属性已被Web标准弃用，部分新浏览器对其支持不稳定，更推荐使用key属性做按键判断。

修复方案 #

将按键监听绑定到全局document对象，这样不管当前页面焦点在哪，按下回车键都会触发判断逻辑，修复后的代码如下：

let submitButton = document.querySelector('.test');

submitButton.addEventListener('click', submitForm, false);

// 把keydown事件绑定到全局document上
document.addEventListener('keydown', function(e) {
  // 可选：加上tag判断，避免在输入框、文本域按回车时触发表单提交，按需保留
  const isInputElement = ['INPUT', 'TEXTAREA'].includes(e.target.tagName);
  if (e.key === 'Enter' && !isInputElement) {
    e.preventDefault();
    submitButton.click();
  }
});

function submitForm() {
  // do something
}

如果你的需求是仅在该div区域获取焦点时按回车才触发提交，不需要全局生效，可以给div添加tabindex="0"属性让其支持聚焦，原绑定在div上的事件逻辑也能正常生效：

<div class="test" tabindex="0">提交按钮</div>

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