중첩 요소가 가리키는 핸들

모두, 중첩 요소 가리개 처리기를 다루는 문제가 있습니다. 그것은 것 같습니다 마우스 child div 입력 할 때, 조상은 hover 상태에 있습니다, 어떤 방법으로 조상의 hoverout 이벤트를 방아쇠를 당길 때, child 요소를 입력하십시오?중첩 요소가 가리키는 핸들

다음은 지금까지 내가 작성한 것입니다. 검토해주십시오.

<style> 
div 
{ 
    border:1px solid red; 
    margin:10px; 
    padding:10px; 
} 
</style> 


    <script> 
     $(function() { 
      $('div').each(function(){ 
      var current = this; 
      $(this).hover(function(event){ 
       event.stopPropagation();// doesn't work. 
       console.log('Capture for hover in ' + current.tagName + '#'+ current.id + 
        ' target is ' + event.target.id); }, 
       function(event){ 
        event.stopPropagation(); 
        console.log('Capture for hover out' + current.tagName + '#'+ current.id + 
        ' target is ' + event.target.id); }); 

          }); 
         }); 
</script> 

<body id="greatgrandpa">       
     <div id="grandpa"> 
       <div id="parent"> 
        <div id="child"/> 
       </div> 
     </div> 
</body>

출처

2013-03-19 Joe.wang

별표를 제거하고 이미지에서 기능을 실행하십시오. ***에서 반복되는 루프 내에서 이벤트 처리기를 연결합니다 *** 모든 요소! – adeneo

안녕하세요, 아데노, 방금 질문을 명확하게 업데이트합니다. 그것을 검토해주십시오. 감사합니다. –

나는 정말로 그것을 얻지 못한다. 그러나 당신은 mouseenter/leave 기능을 원하는대로 설정할 수있다. [** FIDDLE **] (http://jsfiddle.net/FXU65/) ?? – adeneo

.hover()

방법 모두 mouseenter 및 mouseleave 이벤트 핸들러를 결합한다. 마우스를 요소 내에 사용하는 동안 요소에 비헤이비어를 적용하는 데 사용할 수 있습니다.

그러나 mouseover 및 mouseout 이벤트를 사용하는 경우 마우스가 요소의 안팎으로 이동할 때 이러한 이벤트가 트리거됩니다.

예를 들어 다른 시도로 http://jsfiddle.net/5yQY5/을 참조하십시오.

출처

2013-03-19 03:54:00 Cue

답변을 받기 전에 혼란 스럽습니다. 감사합니다. –

를 사용하여 마우스 오버와로 마우스 이벤트 대신

$(function() { 
    $('div').on('mouseover', function(e){ 
     e.stopPropagation(); 
     $(this).addClass('my-bg'); 
    }).on('mouseout', function(e){ 
     $(this).removeClass('my-bg'); 
    }) 
});

데모 : Fiddle

참고 : 그들 각각을 이벤트 처리기를 추가하고 각 사업부를 반복하고 할 필요가 없습니다 $('div').hover(...)으로 전화하면 hover 모든 사업자에 대한 처리기

출처

2013-03-19 03:38:19

안녕하세요, @ Arun P Johny,'hoverin hoverout'과'mouseover mouseout'의 차이점을 말씀해 주시겠습니까? 감사. –

너는 이것 같이 어떤 포스트를 볼 수 있는다 http://stackoverflow.com/questions/1104344/what-is-the-difference-between-the-mouseover-and-mouseenter-events –

대상이인 경우를 찾아야합니다.은 child입니다.

예

$(this).hover(function(e){ 
    if($(e.target).is('div#child')) 
    { 
     // your child span is being hovered over 
     e.stopPropagation(); 
    } 
    else if($(e.target).is('div#parent')) 
    { 
     // your parent element is being hovered over 
    } 
});

출처

2013-03-19 03:41:15

안녕, 친구, Arun P Johny 응답 가장 좋은 방법입니다. 감사. –

@ Joe.wang 항상 환영합니다 ... 난 그냥 코드에 따라 답변을 시도했는데 왜 편집 코드가 현재 코드에 맞는 솔루션을 제공하는지 생각했습니다 .. –

중첩 요소가 가리키는 핸들

답변

관련 문제