mouseleave-Ereignis feuert nicht auf Mausrad scrollen in IE11

Question

Wenn Sie das Mausrad verwenden, um eine Seite nach unten zu scrollen, wird das mouseleave-Ereignis in IE11 nicht ausgelöst, bis der Cursor verschoben wird. Funktioniert gut 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'); 
}); 

Gibt es bekannte Problemumgehungen dafür, das Ereignis auf Scroll zu erzwingen?

jQuery scheint das gleiche Problem zu haben: https://api.jquery.com/mouseleave/

Answer 1

Sie Ihre Zuhörer in eine Funktion setzen könnte und bringen auch eine scroll eventlistener. Dort konnte man überprüfen, ob sich der Mauszeiger noch ‚innerhalb‘ der 'box' und rufen Sie die entsprechende Funktion ist:

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