首页 文章

绑定鼠标事件有问题

提问于
浏览 次
0

我有一张图片表 . 当鼠标悬停时，每一行都会在之前隐藏的div中显示其图像，该div已被绝对定位 . 当我将鼠标悬停在现在显示的图像上时，我想取消绑定tr mouseleave事件以使图像不闪烁，然后在我离开图像div时重新绑定鼠标离开事件 .

我能够取消绑定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();
    });
});

});

编辑：我通过将整个shebang包装在div中并在该div上设置mouseout以触发hide（）和bind（）函数来攻击它...不完全是我想要的，但它会在紧要关头 .

jquery mouseevent unbind

2 回答

  • 1

    我不确定这个模型是否适合您的要求，但考虑将 div#thisPhoto 变成 tr 中的 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 a position: relative 样式，则可以给 div.thePhoto > img a position: absolute 样式并将其相对于表格单元格的左上角定位 . 这样，您只将 .hover() 事件绑定到每个表行 .find("div.thePhoto") 并显示或隐藏其子 img 元素 .

    有关示例，请参见this fiddle .

    回复于
  • 1

    您不需要绑定和取消绑定事件，您需要使用不同的设计模式 .

    看看这个小提琴：http://jsfiddle.net/Diodeus/gHa4u/1/

    回复于

相关问题