鼠标悬停/的mouseenter不受浏览器的动画/移动元素上发射 [英] Mouseover/mouseenter not fired by browser on animated/moving element

问题描述

如果你有，有一个动画来移动它的元素，鼠标悬停和的mouseenter事件不会解雇，除非鼠标是由用户移动。为了证明试试下面用jQuery code块。

If you have an element that has an animation to move it around, the mouseover and mouseenter events aren't fired unless the mouse is moved by the user. To demonstrate try the block of code below with jQuery.

如果你把你的鼠标在移动分区的前面，因此当DIV流逝然后鼠标悬停不解雇和块不停止你不移动鼠标。

If you put your mouse in front of the moving div so you're not moving the mouse when the div passes by then the mouseover isn't fired and the block doesn't stop.

在Firefox中的鼠标悬停事件没有在分区手动移动鼠标开火，但前提是你至少一次移动鼠标。

In Firefox the mouseover event is fired without moving the mouse manually over the div, but only if you've moved the mouse at least once.

我的问题是有解决方法使一个元素鼠标光标移到下仍然有它的鼠标悬停事件开除了？

My question is there a workaround so an element moved under the mouse cursor will still have its mouseover event fired?

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

我知道的例子是人为的，但它仅仅是证明这个问题。感谢您的帮助！

I know the example is contrived, but it is just to demonstrate the issue. Thanks for any help!

推荐答案

这是一个浏览器的bug。

This is a browser bug.

唯一的解决方法是跟踪在文件 -level 鼠标移动处理全球鼠标坐标，然后检查该元素是否涵盖了这些坐标在动画过程。

The only workaround would be to track the global mouse coordinates in a document-level mousemove handler, then check during the animation whether the element covers those coordinates.

这篇关于鼠标悬停/的mouseenter不受浏览器的动画/移动元素上发射的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！