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

Question

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

标签： javascriptaudiohovermouseover

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>