Zdarzenie mouseleave nie jest uruchamiane przy przewijaniu kółka myszy w IE11

Question

Podczas przewijania w dół strony za pomocą kółka myszy zdarzenie mouseleave nie uruchamia się w IE11, dopóki kursor nie zostanie przesunięty. Działa dobrze w Google Chrome.

jsFiddle: http://jsfiddle.net/tonyleeper/5vwf65f7/

HTML

<div class="box">Move the mouse cursor inside this box and observe the mouseenter event fires (background goes green). Next, use the mouse wheel to scroll down without moving the mouse cursor position, observe the mouseleave event doesn't fire. Finally, move the mouse cursor even a little, say 1px, and observe that the mouseleave event then fires</div> 

CSS

.box { 
    font-family: arial; 
    font-size: 16px; 
    width: 300px; 
    height: 200px; 
    background-color: #000077; 
    color: #ffffff; 
} 

JavaScript

var box = document.getElementsByClassName('box')[0]; 

box.addEventListener('mouseenter', function (e) { 
    document.body.setAttribute('style', 'background-color: #007700'); 
}); 

box.addEventListener('mouseleave', function (e) { 
    document.body.setAttribute('style', 'background-color: #ffffff'); 
}); 

Czy są jakieś znane sposoby obejścia tego problemu, aby wymusić uruchomienie zdarzenia przewijania?

jQuery wydaje się mieć ten sam problem: https://api.jquery.com/mouseleave/

Answer 1

można umieścić swój słuchacza do funkcji, a także załączyć scroll EventListener. Nie można sprawdzić, czy kursor myszy jest nadal „wewnątrz” 'box' i wywołać odpowiednią funkcję:

var triggerOnMouseLeave = function(e) { 
    document.body.setAttribute('style', 'background-color: #ffffff'); 
} 

box.addEventListener('mouseleave', triggerOnMouseLeave); 

var triggerOnScroll = function(e) { 
    // Using jQuery here 
    if (!$(box).is(':hover')) { 
     triggerOnMouseLeave(); 
    } 
} 

window.addEventListener('scroll', triggerOnScroll);