Блог

У меня есть несколько divs, у которых есть имя класса «soundWhenHover». Я хочу воспроизводить звук (звук щелчка) всякий раз, когда я навожу на него курсор. Я могу добиться этого, выполнив итерацию по элементам с именем класса и добавив прослушиватель событий для наведения курсора мыши. Однако, если вы перемещаете мышь вокруг div, он издает звук более одного раза. Я хочу, чтобы звук воспроизводился только один раз при каждом наведении курсора мыши на div. Я добавил логическое значение, которое изменяется на true при наведении курсора мыши, а затем при наведении курсора мыши оно меняет его на false. Проблема в том, что у div есть дочерние элементы, и когда вы наводите курсор на эти элементы, это считается наведением курсора мыши. Как мне сделать звук один раз для 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>