當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; }
     }); 

這樣做的訣竅......