进行 onload 过程时，Mouseover 和 Mouseout 不起作用

Question

我有一个鼠标悬停事件和一个显示和隐藏图像的鼠标移出事件... 只要图像完全 cached/loaded.

就可以正常工作

如果我在加载过程中浏览图像并快速离开特定的div（鼠标悬停和鼠标移出应该触发的位置），鼠标移出事件不会触发并且图像始终显示直到（仅如果我重新进入并离开缓存的图像，它可以正常工作）。估计是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

以防万一有人遇到同样的问题...

我无法消除错误，因为 jquery 似乎在图像的 .onload 进行时跳过了 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; }
     });

成功了...

进行 onload 过程时，Mouseover 和 Mouseout 不起作用

Mouseover and Mouseout do not work when onload process is proceeded

javascript

jquery

mouseover

mouseout