javascript event inheritance

Question

나는 목록을 사용하여 떠날 때 가리키고 숨길 때 표시되는 간단한 탐색 메뉴를 작성하고 있습니다. 나는 태그가 공중에 떠있을 때 나타나는 메뉴 (ul)를 원하고 전체 div에서 마우스를 떼었을 때만 사라지기를 원한다. 그러나 아래 코드는 div 태그뿐만 아니라 모든 태그가 마우스 아웃 될 때 mouseout을 치는 것입니다. 각 자식 태그가 이벤트를 상속 받았다고 가정하지만 어떻게 처리 할 수 ​​있습니까?

<div id="Div1" onmouseout="alert('out')"> 
    <div id="header"> 
     <a href="#" onmouseover="alert('over')">Show Others</a> 
    </div> 
    <ul id="menu"> 
     <li>1</li> 
     <li>2</li> 
     <li>3</li> 
    </ul> 
</div> 

Answer 1

마우스 오버/아웃 이벤트는 약간 이상하게 작용할 수 있으며, 최악의 부분은 브라우저마다 다릅니다. 내가 권장하는 것은 jQuery과 같은 JavaScript 프레임 워크를 사용하는 것인데,이 브라우저는 브라우저 간 처리가 mouseover이고 mouseout입니다. 심지어 더 나은 요소는 mouseenter과 mouseleave입니다. 이는 자식 요소가 있어도 마우스를 한 번 입력/나가기 한 번만 트리거하는 특수 이벤트입니다.

demo of mouseenter/mouseleave events in jQuery을 참조하십시오.