목록에서 mouseout 이벤트 전파를 중지하는 방법은 무엇입니까?

Question

UL 요소에 mouseout 이벤트를 첨부하면 stopPropagation()을 추가했지만 이벤트가 LI 개의 자식으로 전파됩니까? 내 코드에 무슨 문제가 있습니까?

http://jsfiddle.net/ubugnu/D7jwq/270/

HTML 코드 :

<ul id="myul"> 
    <li>Outer 
     <ul> 
      <li>Inner 
       <ul> 
        <li>Inner Inner</li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 
<span id="count">0</span> 

JS 코드 :

document.getElementById('myul').addEventListener('mouseout', function(e){ 
    e.stopPropagation(); 
    document.getElementById('count').innerHTML = parseInt(document.getElementById('count').innerHTML) + 1; 
}, false); 

CSS 코드 :이 경우

li { padding: 20px; border: solid 1px #ddd; } 

Answer 1

는 '하는 MouseLeave'대신 '를 사용 마우스 아웃 '. 포인팅 디바이스 (대개 마우스) 가 부착 된 수신기를 가진 소자를 이동할 때

mouseleave event가 실행되어 해당 문서를 인용. 포인팅 디바이스 (대개 마우스) 은 또는 아이의 일회성 연결된 수신기를 가지는 소자를 이동할 때

mouseout event가 시작된다. mouseleave 지원이는 크롬 29에서 사용할 수없는 (그러나 dev에 크롬에 이미있는) 그 이유는 (크롬/오페라 15) 매우 recently을 깜박하기 위해 추가 된 것을

는

참고.

Answer 2

@ raina77ow이 작업을 수행하는 올바른 방법입니다 말했듯이 mouseleave 있지만, 당신은 더 넓은 브라우저 호환성을 찾고 있다면,이 코드를 추가하면 작동합니다 :

var ds=document.getElementById('myul').getElementsByTagName('*'); 
for(var l=0;l<ds.length;l++){ 
    ds[l].addEventListener('mouseout',function(e){e.stopPropagation()},true); 
} 

는