mouseleave olay IE11'de fare tekerleği kaydırmasıyla çalışmaz

Question

Bir sayfayı aşağı kaydırmak için fare tekerleğini kullanırken, fare imleci hareket ettirilinceye kadar, mouseleave olayı IE11'de yanmıyor. Google Chrome'da iyi çalışıyor.

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

Bu olayın, kaydırma işleminde tetiklenmesine zorlamak için bilinen herhangi bir geçici çözüm var mı? https://api.jquery.com/mouseleave/

Answer 1

Bir scroll EventListener takmak da bir işlev içine dinleyici koymak ve olabilir:

jQuery aynı sorunu sahip olduğu ortaya çıkacaktır. Orada uygun işlevi fare imlecini hala 'içinde' 'box' olup olmadığını kontrol ve diyebiliriz:

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