событие mouseleave не срабатывает при прокрутке колесика мыши в IE11

Question

При использовании колеса мыши для прокрутки страницы событие mouseleave не запускается в IE11 до тех пор, пока курсор не будет перемещен. Прекрасно работает в 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'); 
}); 

Существуют ли какие-либо известные способы обхода этого способа, чтобы заставить событие срабатывать при прокрутке?

JQuery, как представляется, имеют один и тот же вопрос: https://api.jquery.com/mouseleave/

Answer 1

Вы можете поместить свой слушателя в функцию, а также прикрепить scroll EventListener. Там вы можете проверить, если курсор мыши не «внутри» 'box' и вызвать соответствующую функцию:

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