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

Question

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

Answer 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>

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

How to make a sound only once when you hover over a div in javascript

javascript

audio

hover

mouseover