鼠标悬停和鼠标退出在继续加载过程时不起作用

Question

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

如果我在加载过程中快速浏览图像并快速离开特定的div(鼠标悬停和鼠标退出应触发的位置)，则不会触发鼠标退出事件，并且图像始终显示直到比(仅当我重新输入并离开缓存图像时它才能正常工作)。我猜jquery卡在图像的加载过程中并且无法识别鼠标退出事件。有什么解决办法吗？

$(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

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

我无法删除该错误，因为当图像的 .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; }
}); 

那做诀窍...