[英]Mouseover and Mouseout do not work when onload process is proceeded
I have a mouseover event and a mouseout event that shows and hide images... It works fine as long as the image is fully cached/loaded. 我有一个鼠标悬停事件和一个显示和隐藏图像的mouseout事件......只要图像被完全缓存/加载,它就可以正常工作。
If I go over the image and leave the specific div (where mouseover and mouseout should trigger) fast during the load process, the mouseout event do not trigger and the image is always displayed until than (only if I reenter and leave with the cached image it works correctly). 如果我在加载过程中快速查看图像并保留特定div(鼠标悬停和鼠标输出应该触发),则不会触发mouseout事件,并且图像始终显示直到(仅当我重新进入并离开缓存图像时)它工作正常)。 I guess that jquery is stuck in the onload process of the image and do not recognize the mouseout event. 我猜jquery卡在图像的onload过程中,并且不识别mouseout事件。 Is there any fix? 有什么问题吗?
$(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");
});
Exact the same bug happens when using mouseenter/mouseleave. 使用mouseenter / mouseleave时会发生相同的错误。
just in case someone has the same problem ... 以防有人有同样的问题......
I could not eraze the bug because jquery seems to skip the mouseout/mouseleave event when .onload for the image is going on. 我无法抹去这个bug,因为当图像的.onload正在进行时,jquery似乎跳过了mouseout / mouseleave事件。 Furthermore a fast mouse movement increases the error rate. 此外,快速鼠标移动会增加错误率。
I just did a small workaround: 我刚刚做了一个小的解决方法:
$(document).on('mousemove', function (e) {
if ($(e.target).attr("class") !== "classname") {
$('.image-content').stop();
$('.image-content').css("display", "none");
e.stopPropagation();
} else { return; }
});
that do the trick ... 这样做的诀窍......
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.