当您将鼠标悬停在javascript中的div上时如何只发出一次声音答案

【问题标题】：How to make a sound only once when you hover over a div in javascript当您将鼠标悬停在javascript中的div上时如何只发出一次声音
【发布时间】：2020-10-12 14:41:34
【问题描述】：

我有一些类名为“soundWhenHover”的 div。每当我将鼠标悬停在它上面时，我都想播放音频（点击声）。我可以通过使用类名迭代元素并为鼠标悬停添加事件侦听器来实现这一点。但是，如果您在 div 周围移动鼠标，它会发出不止一次的声音。每次将鼠标悬停在 div 上时，我只希望音频播放一次。我添加了一个布尔值，一旦它悬停就变为真，然后在鼠标悬停时将其变为假。这样做的问题是 div 有子元素，当您将鼠标悬停在这些元素上时，它会被视为鼠标移出。如何为 div 和元素发出一次声音？

【问题讨论】：

只需将声音绑定到父元素的 mouseenter 事件即可。
XD 我什至没有想到 mouseenter。谢谢编辑：试过了，非常感谢！
没问题。我添加了我的评论作为答案

标签： javascript audio hover mouseover

【解决方案1】：

只需将你的声音绑定到父元素的 mouseenter 事件：

const mouseTarget = document.getElementById('mouseTarget');

mouseTarget.addEventListener('mouseenter', e => {
  console.log('play sound');
});

#mouseTarget, #child {
  border: 1px solid #333;
}

#mouseTarget {
  padding: 5px;
  width: 300px;
  height: 50px;
}


#child {
  padding: 5px;
  width: 200px;
  height: 20px;
}

<div id="mouseTarget">
 <div id="child">
  Test
 </div>
</div>

【讨论】：