問題綁定鼠標事件

我有一個圖像表。每一行當被淹沒時，都會顯示它的圖像，該圖像位於已絕對定位的以前隱藏的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(); 
    }); 
}); 

});

編輯：我在一個div包裹整個家當和對div來觸發設置鼠標移開黑客攻擊hide（）和bind（）函數...不完全是我想要的，但它會在一個捏。

來源

2011-09-02 earachefl

我不確定此模型是否可以滿足您的要求，但可以考慮在tr內將div#thisPhoto分爲div。這樣，當你在圖像上被蒙上陰影時，你仍然被掩蓋在表格行上。例如，標記會是這樣的：

<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風格position: relative，然後你可以給一個div.thePhoto > img風格position: absolute和位置它相對於表格單元格的左上角。這樣，您只綁定一個.hover()事件到每個錶行到.find("div.thePhoto")，並顯示或隱藏其子img元素。

查看this fiddle的例子。

來源

2011-09-02 16:06:33 lsuarez

尼斯 - 會試一試。我正在使用dataTables插件，所以我不確定額外的div是否會打破它。 – earachefl

您不需要綁定和解除綁定事件，您需要使用不同的設計模式。

看看這個小提琴：http://jsfiddle.net/Diodeus/gHa4u/1/

來源

2011-09-02 17:57:21

是的，我想到了......解決方案的唯一問題是，您必須確保輸入新顯示的div以關閉它。雖然比閃爍更好！ – earachefl

問題綁定鼠標事件

回答

相關問題