jQuery의 하위 요소에서 마우스 이벤트를 무시하려면 어떻게해야합니까?

Question

li 요소에 mouseover 및 mouseout 이벤트가 첨부 된 정렬되지 않은 목록이 있습니다. 각각은 링크를 포함하고 li에 약간의 패딩이 있습니다. 마우스를 올리면 mouseover 이벤트가 발생하지만 마우스 오버하면 링크 에이 포함되어 있고 mouseover 이벤트는 둘 다 차례로 발생합니다. 자식 요소가 부모 요소 인 마우스 이벤트를 발생시키는 것 같습니다.이 작업을 중단하려면 어떻게해야합니까? 링크 위에 마우스를 올리면 마우스를 떼지 않고 링크 위에 마우스를 올리면 애니메이션이 활성화되지 않습니다. 이것은 내 코드입니다.

jQuery(document).ready(function(){ 
     jQuery('#menu li ul').hide(); 
     jQuery('#menu li').mouseover(function() { 
      jQuery(this).children("ul").show('fast').stop; 
      return false; 
     }); 
     jQuery('#menu li').mouseout(function() { 
      jQuery(this).children("ul").hide('fast').stop; 
      return false; 
     }); 
}); 

<ul id="menu"> 
     <li><a href="">Some link</a> 
      <ul>Sub content</ul> 
     </li> 
</ul> 

Answer 1

내 자신의 질문에 대한 답을 찾은 것 같습니다. 똑같은 문제가있는 사람에게; 이 코드를 대신 사용해보십시오. 다른 마우스 이벤트와 마찬가지로 커서를 가져 가면 자식 요소에 거품이 발생하지 않습니다.

jQuery('#menu li').hover(
    function() { 
     jQuery(this).children('ul').show('fast'); 
     return false; 
    }, 
    function() { 
     jQuery(this).children('ul').hide('fast'); 
     return false; 
    } 
); 

Answer 2

다른 메뉴 레벨을 구분하려면 css 클래스를 사용하십시오. 그런 다음 jQuery 선택기에서 하나의 클래스 또는 다른 클래스를 쉽게 검색 할 수 있습니다.

Answer 3

사용 "이벤트 stopPropagation()."위쪽으로 버블 링에서 이벤트를 중지하려면

jQuery('#menu li a').mouseover(function(evt) { 
     evt.stopPropagation(); 
     return false; 
    }); 
    jQuery('#menu li a').mouseout(function(evt) { 
     evt.stopPropagation(); 
     return false; 
    }); 

는 다른 방법 대신에 마우스 오버/아웃의 mouseenter 및 mouseleave 이벤트를 사용합니다. jQuery는 브라우저 간 동작을 정상화하며 이러한 이벤트는 버블 링하지 않는 이점이 있습니다 ...

Answer 4

이

$('#menu li').live('mouseenter mouseleave', function (e) { 
    if (e.type == 'mouseenter') { 
     //Show ul 
    } else { 
     //Hide ul 
    } 
}); 

장점은 이벤트 위임의 사용이다 시도 할 수 있습니다. 행운을 빈다!

Answer 5

내가 AS3에서 당신이 넣을 수 있습니다 JS에서 equivelant 행동을 찾고 있었다 :

object.mouseenabled = false; 

꽤 잘 작동 CSS를 사용하여 배치하는 것입니다 내가 찾은 방법 :

.element { pointer-events: none; } 

을 (하지만 당신이 아무것도 전혀 필요하지 않는 경우에만 작동하는 것 같아요. 마우스를 가져 가면 마우스를 움직일 때 이상한 행동을하지 않으려 고 툴팁에 사용합니다.