javascript hover issues

Question

사용자가 jquery의 .hover() 또는 javascript의 mouseenter()를 사용하면 마우스가 요소를 입력 할 때뿐만 아니라 마우스가 요소 내에있는 요소를 교차 할 때도 이벤트가 트리거됩니다. 어떻게하면 요소가 이벤트에 영향을 미치지 않으면 서 요소가 마우스로 들어가거나 빠져 나올 때만 트리거되도록이 작업을 중지 할 수 있습니까?

 $(document).ready(function(){ 
      introAnimation(); 

      $('#nav-item1').hover(function() { 
       $('#createSub').slideDown(300); 
      }); 
      $('#nav-item1').mouseout(function() { 
       $('#createSub').slideUp(300); 
      }); 

      $('#nav-item2').hover(function() { 
       $('#manageSub').slideDown(300); 
      }); 
      $('#nav-item2').mouseout(function() { 
       $('#manageSub').slideUp(300); 
      }); 
      $('#nav-item3').hover(function() { 
       $('#storeSub').slideDown(300); 
      }); 
      $('#nav-item3').mouseout(function() { 
       $('#storeSub').slideUp(300); 
      }); 
     }); 

Answer 1

호버가 (unover)하는 방법이 있습니다. 중첩 된 자식 요소를 통해 때 당신에게 마우스를 해고 가져옵니다 mouseOut 이벤트에 대한 필요 :

$(document).ready(function(){ 
     introAnimation(); 

     $('#nav-item1').hover(function() { 
      $('#createSub').slideDown(300); 
     },function() { 
      $('#createSub').slideUp(300); 
     }); 
     $('#nav-item2').hover(function() { 
      $('#manageSub').slideDown(300); 
     },function() { 
      $('#manageSub').slideUp(300); 
     }); 
     $('#nav-item3').hover(function() { 
      $('#storeSub').slideDown(300); 
     },function() { 
      $('#storeSub').slideUp(300); 
     }); 
    }); 

Answer 2

핸들러 내에서이 추가

if(ev.target !== this){ return; } 

ev.target는 마우스 이벤트가 트리거 것입니다. this은 이벤트를 바운딩 한 것입니다.