マウスを特定の要素に移動するときにOnmouseoutを実行しないでください。

Question

このコードでは、article要素の上にマウスを置くと、オーディオクリップが再生されます。問題は、マウスが子要素にマウスを置いたときに停止することです。マウスが一般的なarticle要素から子要素に移動したときにStopsound機能を実行しないようにするにはどうすればよいですか？

EDIT：基本的には、子要素のいずれかを切り替えると機能が実行されないようにします。 jQueryの.hover機能を使用して

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イベントはいつでもマウストリガーたとえその要素がイベントのターゲット要素の子であっても、別の要素の上にホバーします。あなたは親要素の境界内にとどまるので、あなたはmouseoutイベントを処理する前に、そのイベントを検出することができれば、あなたはこのケースとの真の脱離を区別することができるとき

しかし、mouseoverイベントもがトリガされます親要素。

あなたはsetTimeoutによる治療を遅らせ、そしてすぐに次mouseoverイベントを持っている場合、そのアクションをキャンセルすることによって行うことができます。この：あなたはヤウドはあなたがたを変更するとことがわかり記事のタグ内の子divを行った場合

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

hereが説明したように、この問題を解決します。

注：オーディオが開始する前にサンプルファイルに数秒間の遅延があります。そのため、articleをホバーすると音楽が開始されるまで数分間待ってください。

また、お客様のaとdivタグが正しくネストされていません。

最後に、私はHTMLからイベントバインディングを削除して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>