event.stopPropagation을 적용하는 방법은 무엇입니까?

Question

먼저 문제를 설명해 드리겠습니다. 나는

 function smenu_over(obj) { 
    var a = obj.parentNode.childNodes[0]; 
    if(a!=null) { 
    var top = $(".topnav_icons").length && !$(".logo_t").length ? "-45px" : "-34px"; 
    setBckPosition(a, top); 
    a.style.color = "#fff"; 
    } 
}  

내가 마우스 오버 이벤트가 발생할 때 호출되는이 함수 내부의 event.stopPropagation을 적용 할 필요가

<ul onmouseover="smenu_over(this)" onmouseout="smenu_out(this)" class="sub-menu" style="left:0;"> 
      <li><a href="#">Navigation Item with long text do text wrap</a></li> 
      <li><a href="#">Sub nav item</a></li> 
      <li><a href="#">Sub nav item</a></li> 
      <li style="border-bottom:0;"><a href="#">Sub nav item</a></li> 
      </ul>  

JS 기능은 다음 UL 구조를 사용하고 있습니다.

event.stopPropagation을 적용하는 코드를 도와주십시오.

미리 감사드립니다.

Answer 1

이 의미 :

$('ul.sub-menu a').mouseenter(function(event){ 
    event.stopPropagation(); 

    // your code.... 
}); 

Answer 2

이 같은 인라인되는 것을 현재의 핸들러를 제거 할 수 있습니다

이

<ul class="sub-menu" style="left:0;"> 

그런 다음과 같이 jQuery를 이러한 기능을 결합 할 수 있습니다

를

$(function() { //run when DOM is ready 
    $("ul.sub-menu").hover(smenu_over, smenu_out); 
}); 

함수에서 obj 대신 this ,이 같은, 당신이 유혹하고있는 요소를 참조합니다 :

function smenu_over() { 
    var a = this.parentNode.childNodes[0]; 
    if(a!=null) { 
    var top = $(".topnav_icons").length && !$(".logo_t").length ? "-45px" : "-34px"; 
    setBckPosition(a, top); 
    a.style.color = "#fff"; 
    } 
} 

중요한 차이는 여기에 mouseenter 및 mouseleave 이벤트 .hover()지도 (하지mouseover/mouseout)입니다, 하지 않는 자식을 입력/퇴장 할 때 부모에게 실행되므로 전파를 중지 할 필요가 없으므로 이미 원하는대로 동작합니다.

아마도이 코드를 훨씬 더 최적화 할 수 있지만 다른 코드를 보지 않아도 나에게 나쁜 조언을 드리고 싶지는 않지만 현재 문제를 해결할 것입니다.