如何实现可聚焦图片被Tab选中按回车键时播放音效？

实现方案 #

方案1：内联事件快速修改 #

直接在现有img标签上新增onkeydown事件判断回车键触发，修改后HTML代码如下：

<img src="/images/butt.gif" onclick="fartSound();" tabindex="0" onkeydown="if(event.key === 'Enter') fartSound()">

方案2：事件监听实现（更易维护） #

如果希望HTML和逻辑分离，推荐用事件绑定的方式实现：

1. 给img元素添加id标识，移除内联事件：

<img id="fartBtn" src="/images/butt.gif" tabindex="0">

2. 调整JS逻辑统一绑定事件，还可额外优化播放体验：

const fartBtn = document.getElementById('fartBtn');
// 提前缓存音频对象，避免每次触发都重新加载资源
const fartAudio = new Audio('/audio/fart.mp3');

function fartSound() {
  // 重置播放进度，解决连续触发时音效不播放的问题
  fartAudio.currentTime = 0;
  fartAudio.play();
}

// 绑定点击触发
fartBtn.addEventListener('click', fartSound);
// 绑定聚焦状态下回车触发
fartBtn.addEventListener('keydown', (e) => {
  // 如需兼容旧版浏览器，可补充判断 e.keyCode === 13
  if (e.key === 'Enter') {
    fartSound();
  }
});

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