jquery - 当目标动画并经过鼠标指针时，mouseenter/mouseleave 事件不会触发

Question

我在这里举个例子来说明这种情况: http://jsfiddle.net/nubrF/40/

如果将鼠标放在动画元素的路径上，您可以观察到，当目标元素经过您的鼠标指针“下方”时，仅在 Firefox 中(不在 IE、Chrome 或 Safari 中)触发事件。

我实际上有两个问题:

1. 这是正常的浏览器行为吗？

2. 您建议使用什么方法来以某种方式模拟这些事件并在目标元素经过鼠标指针下方时得到通知？

我应该提到，我已经考虑过鼠标的 pageX 和 pageY 以及页面中元素的位置，但这个解决方案看起来很复杂而且不是很干净。

感谢您的帮助。

Answer 1

是的，这是正常行为。一种解决方法可能是放弃 mouseleave/mouseenter 并将 mousemove 事件绑定(bind)到文档。从那里，获取页面上的鼠标指针位置以及动画元素的 offset()、with() 和 height()。如果从 mousemove 事件保存的最后一个点落在该区域内，则您的鼠标位于该元素中。

您需要在每次动画更新时对其进行测试，您可以使用 animate step function 来完成此操作.

例如

function myAnimateStepFunc(e,fx) {
    var $e = $(fx.elem);
    var p = $e.offset();
    var isin = false;
    if(lastx >= p.left && lasty >= p.top) {        
        isin =(lastx < p.left + $e.width() && lasty < p.top + $e.height());           
    }

...

这可能就足够了，尽管您可以扩展它，然后自己针对动画元素触发 mouseleave/mouseenter 事件。

请注意，您需要将 mousemove 绑定(bind)到整个页面，因为无论鼠标在页面上移动到何处，您都需要更新鼠标的 Lastx 和 Lasty 位置，而不仅仅是在动画的包含 div 内。