如何实现按下Enter键触发循环切换音效的按钮功能？

下面提供两种实用方案，可让你按下Enter键时触发按钮的音效切换逻辑：

方案1：利用按钮原生特性（推荐） #

按钮元素本身支持聚焦状态下按Enter自动触发click事件，只需让按钮在页面加载后自动获取焦点，就能直接通过Enter键触发功能：

在你的JS代码中，初始化按钮文本后添加一行：

// 页面加载完成后让按钮自动获得焦点
cycle_button.focus();

这样用户打开页面后直接按Enter就能生效；若焦点移到其他元素，按Tab键切回按钮后，Enter键依然能触发功能。

方案2：监听全局键盘事件 #

如果需要无论焦点在哪里，按下Enter都触发音效切换，可以给文档添加全局键盘监听：

// 监听全局Enter键按下事件
document.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    // 手动触发按钮的点击逻辑
    cycle_button.click();
  }
});

这种方式下，任何场景按下Enter都会执行音效切换操作。

完整代码示例（方案1整合版） #

const sounds = ['Power Up', 'Idle', 'Fire!', 'Over Heat!', 'Power Down', 'Party Time!', 'RESET', ];

let sound_index = sounds.length - 1;

const cycle_button = document.getElementById("cycle_button");

// 设置按钮初始文本
cycle_button.innerText = sounds[0];
// 让按钮自动获取焦点，支持Enter触发
cycle_button.focus();

cycle_button.addEventListener("click", () => {
    // 停止上一个音效
    const last_sound = sounds[sound_index];
    const last_audio = document.getElementById(last_sound);
    last_audio.pause();
    last_audio.currentTime = 0;
    // 切换到下一个音效
    sound_index = (sound_index + 1) % sounds.length;
    const sound = sounds[sound_index];
    const audio = document.getElementById(sound);
    audio.play();
    // 更新按钮显示的下一个音效名称
    const next_sound = sounds[(sound_index + 1) % sounds.length];
    cycle_button.innerText = next_sound;
});

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