evento di mouseleave non si attiva sulla rotellina del mouse scorrere in IE11

Question

Quando si utilizza la rotellina del mouse per scorrere verso il basso di una pagina, l'evento di mouseleave non viene attivato in IE11 finché il cursore non viene spostato. Funziona bene in 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'); 
}); 

Esistono soluzioni alternative note per forzare l'evento a far scattare lo scorrimento?

jQuery sembra avere lo stesso problema: https://api.jquery.com/mouseleave/

Answer 1

Si potrebbe mettere il vostro ascoltatore in una funzione e anche allegare un eventListener scroll. Ci si potrebbe verificare se il cursore del mouse è ancora 'dentro' la 'box' e chiama la funzione appropriata:

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