將鼠標移動到某些元素時，鼠標不能運行？

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事件之前檢測到的事件，你可以這樁案件的真實離去區分父元素。

這個你可以當你有一個mouseover事件後立即與setTimeout貽誤治療，並取消該操作做：

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 
} 

Answer 2

使用jQuery的.hover功能解釋here解決了這個問題。

注意：音頻開始前，我的示例文件中有幾秒鐘的延遲，因此當您將鼠標懸停在article上時，請稍等片刻，等待音樂開始播放。

此外，您的a和div標記錯誤地嵌套。

最後，我從HTML中刪除了事件綁定，並將其移入JavaScript，強烈建議使用JavaScript，因爲內聯HTML事件綁定導致「意大利麪代碼」，更難調試/縮放，導致匿名全局事件處理包裝函數（即改變「這個」 binidng）創建和HTML事件綁定不遵循更現代和強大W3C DOM Event標準

var playing = false; 
 

 
var audio = document.getElementById("mySound"); 
 
var art = document.getElementById("article24"); 
 

 
// We don't really need two functions for start vs. stop 
 
// One function that simply toggles the sound based on 
 
// a flag will do it. JQuery's .hover method takes two 
 
// arguments (a mouseover callback and a mouseleave callback) 
 
$(art).hover(playStop, playStop); 
 

 
function playStop(e) { 
 
    // Check to see if we are playing or not and toggle based on that: 
 
    if(!playing){ 
 
    audio.play(); 
 
    playing = true; 
 
    } else { 
 
    audio.pause(); 
 
    audio.currentTime = 0;  
 
    playing = false;  
 
    } 
 
}

/* The following is not necessary and is only included to 
 
    be able to visually discern the various child elements */ 
 
article { border:10px solid black; padding:10px;} 
 
div { border:5px solid red;} 
 
div * {border-color: blue;} 
 
div h2 {background:green; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<audio id='mySound' src="http://www.stephaniequinn.com/Music/Mozart%20-%20Presto.mp3"></audio> 
 

 
<article id="article24"> 
 
     
 
    <div class="box" id="box24"> 
 
    <h2>I am in child div #1</h2> 
 
    </div> 
 
     
 
    <div id="present24">I am child div #2 
 
    <a href=""> 
 
     <div id="bauble24"> 
 
     <p id="belle24">I am in child div #2, but am child div #3</p> 
 
     </div> 
 
    </a> 
 
    </div> 
 
    
 
</article>