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

При использовании колесика мыши для прокрутки страницы вниз событие 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/


javascript scroll jquery internet-explorer-11 mouseleave
person magritte    schedule 09.10.2015    source источник
comment
Очевидная разница в том, что IE не обновляет положение мыши после прокрутки, тогда как Chrome это делает. Запуск mousemove, похоже, не работает, чтобы заставить его обновиться ...   -  person Tony Hinkle    schedule 09.10.2015
comment
Я использую версию Chrome 45.0.2454.101, и его поведение такое же, как и в IE11 - не обновляется при прокрутке и не перемещении мыши. Это могло быть просто ожидаемым поведением.   -  person Shahar    schedule 12.10.2015
comment
@Shahar Это странно, я тоже использую Chrome 45.0.2454.101, и я вижу, что поведение отличается от IE, при прокрутке срабатывает mouseleave   -  person magritte    schedule 12.10.2015
comment
Странно, хотя сейчас ведет себя так, как вы описываете. Я думаю, это связано с фокусом окна (иногда, когда окно не в фокусе, поведение странное).   -  person Shahar    schedule 12.10.2015

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете поместить слушателя в функцию, а также прикрепить 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);
person Luuuud    schedule 16.10.2015
comment
Спасибо, LuudJacobs, это в значительной степени то, что я в конечном итоге сделал, чтобы обойти это. - person magritte; 16.10.2015