javascript - 将鼠标移到某些元素上时不运行 Onmouseout？

Question

因此，当您将鼠标悬停在 article 元素上时，这段代码会播放一段音频。问题是当鼠标悬停在子元素上时它会停止。当鼠标悬停在一般 article 元素上并悬停在子元素上时，如何使 Stopsound 函数不运行？

编辑:基本上我不希望这两个函数在交替悬停在哪个子元素上时运行。

   function PlaySound(soundobj) {
     var thissound = document.getElementById(soundobj);
     thissound.play();
   }

   function StopSound(soundobj) {
     var thissound = document.getElementById(soundobj);
     thissound.pause();
     thissound.currentTime = 0;
   }

* {
  margin: 0;
  padding: 0;
}
article24 {
  width: 50px;
  height: 100px;
  background-color: green;
}
#box24 {
  width: 50px;
  height: 50px;
  background-color: blue;
}
#present24 {
  width: 50px;
  height: 50px;
  background-color: red;
}
#bauble24 {
  width: 10px;
  height: 10px;
}

<audio id='mySound' src="http://www.freesound.org/data/previews/278/278903_3546642-lq.mp3"></audio>
<article id="article24" onmouseover="PlaySound('mySound')" onmouseout="StopSound('mySound')">
  <div id="box24">
    <h2></h2>
  </div>
  <div id="present24">
    <a href="">
      <div id="bauble24">
        <p id="belle24">""</p>
      </div>
    </a>
  </div>
</article>

Answer 1

事实上，只要鼠标悬停在另一个元素上，就会触发 mouseout 事件，即使该元素是事件目标元素的子元素也是如此。

但是，mouseover 事件也会在您停留在父元素的范围内时触发 ，因此如果您可以在处理 mouseout 之前检测到该事件 事件，您可以区分这种情况和父元素的真正离开。

这可以通过使用 setTimeout 延迟处理来实现，并在紧随其后的 mouseover 事件中取消该操作:

var timer = -1; // ID of a timer we will use

function PlaySound(soundobj) {
    clearTimeout(timer); // cancel any pending StopSound action
    var thissound=document.getElementById(soundobj);
    thissound.play();
}

function StopSound(soundobj) {
    timer = setTimeout(function () { // defer the action
        var thissound=document.getElementById(soundobj);
        thissound.pause();
        thissound.currentTime = 0;
   }, 0); // 0 is enough, as the `mouseover` event is already posted in the message queue
}