当onload进程继续时，Mouseover和Mouseout不起作用

Question

我有一个鼠标悬停事件和一个显示和隐藏图像的mouseout事件......只要图像被完全缓存/加载，它就可以正常工作。

如果我在加载过程中快速查看图像并保留特定div（鼠标悬停和鼠标输出应该触发），则不会触发mouseout事件，并且图像始终显示直到（仅当我重新进入并离开缓存图像时）它工作正常）。我猜jquery卡在图像的onload过程中，并且不识别mouseout事件。有什么问题吗？

$(document).on('mouseover',".divclass", { ....

loadImage(urllink);

function loadImage(src) {
    var image = new Image();
    image.onload = function() {
        if ('naturalHeight' in this) {
            if (this.naturalHeight + this.naturalWidth === 0) {
                this.onerror();
                return;
            }
        } else if (this.width + this.height == 0) {
            this.onerror();
            return;
        }
        // At this point, there's no error. Picture is available:
        $('#picture').attr('src', urllink);
        $(".image-content").stop().fadeIn(200);
    };
    image.onerror = function() {
        //display noimg.png
        $('#picture').attr('src', ".../noimg.png");
        $(".image-content").stop().fadeIn(200);

    };
    image.src = src;
}
...
});

 $(document).on('mouseout',".divclass", function (e) {
    $('.image-content').css("display", "none");
     });

使用mouseenter / mouseleave时会发生相同的错误。

Answer 1

以防有人有同样的问题......

我无法抹去这个bug，因为当图像的.onload正在进行时，jquery似乎跳过了mouseout / mouseleave事件。此外，快速鼠标移动会增加错误率。

我刚刚做了一个小的解决方法：

   $(document).on('mousemove', function (e) {
     if ($(e.target).attr("class") !== "classname") { 
    $('.image-content').stop();
    $('.image-content').css("display", "none");
   e.stopPropagation();
     } else { return; }
     }); 

这样做的诀窍......