Mouseover / mouseenter не запускается браузером на анимационном / движущемся элементе

Question

Если у вас есть элемент с анимацией для его перемещения, события mouseover и mouseenter не запускаются, если мышь не перемещается пользователем. Чтобы продемонстрировать, попробуйте блок кода ниже с помощью jQuery.

Если вы поместите мышь перед движущимся элементом div, чтобы вы не двигали мышь, когда элемент div проходит, то при наведении курсора не происходит и блок не останавливается.

В Firefox событие mouseover вызывается без перемещения мыши вручную по div, но только если вы переместили мышь хотя бы один раз.

У меня вопрос, есть ли обходной путь, чтобы элемент, перемещенный под курсором мыши, по-прежнему вызывал событие mouseover?

<script>
$(function() {
    var move = 10,
        left = 0,
        width = 100;

    var stop = setInterval(function() {
        left += move;
        $('#mydiv').css('left', left);
        if (left < 0 || (left + width > parseInt($(window).width()))) 
            move = -1 * move;
    }, 10);

    $('#mydiv').mouseover(function() { clearInterval(stop); });
});
</script>
<div id="mydiv" style="width: 100px; height: 100px; position: absolute; top: 0; left: 0; background-color: Black;">&#160</div>

Я знаю, что пример надуман, но это просто для демонстрации проблемы. Спасибо за любую помощь!

Answer 1

Это ошибка браузера.

Единственный обходной путь - отслеживать глобальные координаты мыши в обработчике document -level mousemove, а затем проверять во время анимации, охватывает ли элемент эти координаты.