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

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

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

В 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>

Я знаю, что пример надуманный, но он просто демонстрирует проблему.


person DogSuitGir    schedule 18.10.2010    source источник


Ответы (1)


Это баг браузера.

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

person SLaks    schedule 18.10.2010