mouseleave 无法正常工作答案

【问题标题】：mouseleave is not working as it should bemouseleave 无法正常工作
【发布时间】：2012-10-04 13:32:02
【问题描述】：

当您将鼠标悬停在图像上时，我使用 mouseenter 和 mouseleave 以获得更大的图像。如果鼠标移动得太快，mouseleave 不起作用，放大后的图像仍然存在。

$(document).ready(function() {
    $('.productImg').bind('mouseenter', function(){
        if(!$('#zoom_product_image').length){
            var maxWidth=$(this).parents('form').width();
            var maxHeight=$(this).parents('form').height();

            var link=this.src.replace(/small/g, 'big');
            $(this).parents('form').append('<img id="zoom_product_image" style="display: none;" src="'+link+'">');
            var img=new Image();
            img.onload=function(){
                $('#zoom_product_image').css({'position': 'absolute', 'border': '1px solid #78C7FF', 'top': '0px', 'left': '0px', 'z-index': '10000', 'opacity': '0.95', 'cursor': 'pointer'});
                $('#zoom_product_image').fadeIn(200);

                if($('#zoom_product_image').width()>maxWidth){
                    $('#zoom_product_image').css({'width': maxWidth, 'height': $('#zoom_product_image').height()*(maxWidth/$('#zoom_product_image').width())});
                }
                if($('#zoom_product_image').height()>maxHeight){
                    $('#zoom_product_image').css({'height': maxHeight, 'width': $('#zoom_product_image').width()*(maxHeight/$('#zoom_product_image').height())});
                }
            }
            img.src=link;

            $('#zoom_product_image').bind('mouseleave', function(){
                $('#zoom_product_image').detach();
            });

            $('#zoom_product_image').bind('click', function(){
                window.location.href=$('#zoom_product_image').parent().find('.bigtitle').attr('href');
            });
        }
    });
});

【问题讨论】：

您可能需要将mouseleave 和click 事件移到mouseenter 事件之外。
您是否碰巧在jsfiddle.net 上有一个工作示例，如果没有，您能否创建一个简单的示例来准确显示您的体验？
不幸的是 jsfiddle 停止工作和工作和家庭。我可以给原始链接。
原件会很好，我相信有人能从中找出问题 =) 另外，这个问题看起来很相似，可能会有所帮助：stackoverflow.com/questions/6144349/…
http://devluntegg.fishok.getmyip.com:39875/voblery-asakura-kitay.html 这个链接我没找到有用的：(

标签： jquery mouseleave

【解决方案1】：

还可以考虑先加载图像，然后在加载后绑定事件。

另一个技巧是使用 jQuery 悬停功能（工作原理相同，只是它可能更容易阅读）：

$(".productImg").hover(
    function() {
        // do mouse enter things
    },
    function() {
        // do mouse leave things
    }
);

并将其放入 onload 事件中：

img.onload = function() {
    $(".productImg").hover(..);
};

【讨论】：

【解决方案2】：

$(document).ready(function() {
    $('.productImg').bind('mouseenter', function(){
        if($('#zoom_product_image').length)
            $('#zoom_product_image').detach();

        var maxWidth=$(this).parents('form').width();
        var maxHeight=$(this).parents('form').height();

        var link=this.src.replace(/small/g, 'big');
        $(this).parents('form').append('<img id="zoom_product_image" style="display: none;" src="'+link+'">');
        var img=new Image();
        img.onload=function(){
                $('#zoom_product_image').css({'position': 'absolute', 'border': '1px solid #78C7FF', 'top': '0px', 'left': '0px', 'z-index': '10000', 'opacity': '0.95', 'cursor': 'pointer', 'display': 'block'});

                if($('#zoom_product_image').width()>maxWidth){
                    $('#zoom_product_image').css({'width': maxWidth, 'height': $('#zoom_product_image').height()*(maxWidth/$('#zoom_product_image').width())});
                }
                if($('#zoom_product_image').height()>maxHeight){
                    $('#zoom_product_image').css({'height': maxHeight, 'width': $('#zoom_product_image').width()*(maxHeight/$('#zoom_product_image').height())});
                }
        }
        img.src=link;

        $(this).parents('form').bind('mouseleave', function(){
            $('#zoom_product_image').detach();
        });

        $('#zoom_product_image').bind('click', function(){
            window.location.href=$('#zoom_product_image').parent().find('.bigtitle').attr('href');
        });
    });
});

【讨论】：