마우스를 특정 요소로 움직일 때 Onmouseout이 실행되지 않습니까?

Question

따라서이 코드는 article 요소 위로 마우스를 가져 가면 오디오 클립이 재생됩니다. 문제는 마우스가 자식 요소를 가리키면 멈추는 것입니다. 마우스를 일반 article 요소에서 자식 요소 위로 가져 가면 Stopsound 기능이 실행되지 않도록하려면 어떻게해야합니까?

편집 : 기본적으로 나는 당신이 마우스를 가져다 놓은 자식 요소 중 하나를 번갈아 전환 할 때 어떤 기능도 실행하지 않기를 바란다. here 설명으로 .hover jQuery의 함수를 사용

는

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 이벤트가 도를 트리거

그러나,이 케이스와의 진정한 떠나는 구별 할 수있다 부모 요소.

즉시 다음은 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

이 문제를 해결한다.

참고 : 오디오가 시작되기 전에 샘플 파일에 몇 초의 지연이 있습니다. 따라서 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>