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

如何解决当您将鼠标悬停在div上时，如何只发出一次声音

我有一些具有类名称“ soundWhenHover”的div。 我想将音频悬停在上面时播放音频（咔嗒声）。我可以通过使用类名称遍历元素并为mouSEOver添加事件侦听器来实现此目的。但是，如果在div上移动鼠标，则会使声音不止一次。每当您将鼠标悬停在div上时，我只希望音频播放一次。 我添加了一个布尔值，将其悬停后将更改为true，然后在鼠标移出时将其更改为false。问题在于div有子元素，当您将鼠标悬停在那些元素上时，它会被视为mouSEOut。如何为div 和元素发出声音？

解决方法

只需将您的声音绑定到父元素的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>