如何实现点击按钮或按下回车键时执行指定JS代码

要实现按钮点击、按回车键都触发指定逻辑，可按以下方式修改代码：

核心思路 #

• 将按钮触发的业务逻辑抽为独立公共函数，供不同事件监听复用，避免重复代码
• 保留原有按钮的click事件监听响应鼠标点击
• 按需添加键盘事件监听响应回车操作：
  • 如果只需要按钮获得焦点时按回车触发：无需额外写键盘监听，原生<button>元素默认支持聚焦状态下按回车/空格触发click事件，只要不给按钮加disabled属性、不设置tabindex="-1"禁止聚焦即可，这是最符合无障碍规范的写法
  • 如果需要页面任意位置按回车都触发：给document绑定keydown事件，判断按下的按键为Enter时，调用公共逻辑函数即可

完整修改代码 #

JS部分（核心修改） #

const befoClick = document.querySelector('.befoClick');
const afteClick = document.querySelector('.afteClick');

// 抽离公共触发逻辑
const handleTrigger = () => {
  afteClick.classList.toggle('clicked');
  // 此处可追加所有需要触发的业务代码
}

// 响应鼠标点击
befoClick.addEventListener('click', handleTrigger);

// 响应全局回车键（不需要全局触发可删除这段代码）
document.addEventListener('keydown', (e) => {
  // 优化：如果当前焦点在输入框/文本域，不触发按钮逻辑，避免干扰表单输入
  const activeElTag = document.activeElement.tagName.toLowerCase();
  if (['input', 'textarea'].includes(activeElTag)) return;

  // 判断按下的是回车键
  if (e.key === 'Enter') {
    handleTrigger();
  }
})

CSS部分（无需修改，和原有代码一致） #

body{
  display: grid;
  place-items: center;
  height:100vh;  
}

button{
  width:200px;
  height:50px;
  font-size:20px;
  cursor: pointer;
  border:none;
  border-radius: 8px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
}
.befoClick{
  background-color: rgb(74, 74, 255);
}

.afteClick{
  background-color: rgb(67, 255, 77);
  visibility: hidden;
}

.clicked{
  visibility: visible;
}

.bfrClick{
  visibility: hidden;
}

HTML部分（无需修改，和原有代码一致） #

<div class='allBtn'>
  <div>
    <button class='befoClick'>CLICK ME</button>
  </div>
  <div>
    <button class='afteClick'>CLICKED</button>
  </div>
</div>

注意事项 #

• 不要使用已废弃的e.keyCode === 13判断回车键，优先使用标准APIe.key === 'Enter'，兼容性更好
• 全局回车监听仅在确实需要全局快捷键的场景下使用，否则优先使用按钮原生的焦点触发逻辑，避免和页面其他交互、表单默认行为冲突

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