바인딩 마우스 이벤트 문제가 발생했습니다.

Question

이미지 테이블이 있습니다. 마우스를 올리면 각 행이 이전에 숨겨진 div에 이미지가 표시됩니다.이 이미지는 절대적으로 배치되어 있습니다. 지금 표시된 이미지 위로 마우스를 가져 가면 이미지가 깜박이지 않도록 tr mouseleave 이벤트의 바인딩을 해제 한 다음 이미지 div를 닫을 때 mouseleave 이벤트를 리 바인드하고 싶습니다.

mouseleave 이벤트를 바인딩 해제 할 수 있지만 리 바인딩하면 깜박임이 발생합니다. 관련 코드 :

<table border="1" id="photoTable"> 
<tbody> 
    <tr class="item"> 
     <td class="filename"> 
      GraphDataCAQ3UW88.png 
     </td> 
    </tr> 
    </tbody> 
</table> 
<div id="thisPhoto"></div> 

CSS :

#thisPhoto{ 
display:none; 
position:absolute; 
left:250px; 
top:150px; 
border: 1px solid black; 
background-color:white; 
padding:20px; 
z-index:2; 
} 

JS :

$(document).ready(function(){ 

(function($){ 
    $.fn.getThisPhoto = function(){ 
     return $(this).each(function(){ 
      //I've left out the code which gets the data to pass to $.get() 
      $.get('administration/PhotoManagement/thisPhoto.cfm', 
       data, 
       function(response){ 
        $('#thisPhoto').html(response).show(); 
       } 
      ); 
     }); 
    }; 
})(jQuery); 

    $('tr.item').hover(function(){  
    $(this).getThisPhoto(); 
}, 
function(){ 
    $('#thisPhoto').hide(); 
}); 

$('#thisPhoto').mouseenter(function(){ 
    $('tr.item').unbind('mouseleave'); 
}).mouseleave(function(){ 
    $('tr.item').bind('mouseleave', function(){ 
     $('#thisPhoto').hide(); 
    }); 
}); 

}); 

편집 : 내가 사업부에서 전체 오두막 포장 및 트리거에 해당 사업부에로 마우스를 설정하여 해킹 hide()와 bind() 함수는 ... 정확히 내가 원했던 것은 아니지만 핀치 (pinch)로 할 것입니다.

Answer 1

이 모델이 귀하의 요구 사항에 부합하는지 여부는 확실하지 않지만 tr 내 div#thisPhoto 개를 개별 div 개로 만들 것을 고려해보십시오. 이렇게하면 이미지 위로 마우스를 가져 가면서 테이블 행 위로 마우스를 움직일 수 있습니다. 예를 들어, 마크 업이 같은 것입니다 : 당신이 position: relative 스타일 div.thePhoto을주는 경우에

<tr> 
    <td> 
     <div class="thePhoto"> 
      <img src="http://www.mysite.com/images/Image001.jpg" /> 
     </div> 
     Image001.jpg 
    </td> 
</tr> 
<tr> 
    <td> 
     <div class="thePhoto"> 
      <img src="http://www.mysite.com/images/Image002.jpg" /> 
     </div> 
     Image002.jpg 
    </td> 
</tr> 

를, 당신은 다음 상대 테이블 셀의 왼쪽 상단 모서리에 div.thePhoto > imgposition: absolute 스타일과 위치를 제공 할 수 있습니다. 이렇게하면 각 테이블 행에 .hover() 이벤트를 .find("div.thePhoto")으로 바인딩하고 해당 자식 img 요소를 표시하거나 숨길 수 있습니다.

예를 들어 this fiddle을 참조하십시오.

Answer 2

이벤트를 바인드하거나 바인딩 해제 할 필요가 없으므로 다른 디자인 패턴을 사용해야합니다.

이 바이올린에서보세요 : http://jsfiddle.net/Diodeus/gHa4u/1/