当目标被动画处理并且通过鼠标指针下方时，mouseenter/mouseleave事件不会触发。

Question

我有一个示例来说明这种情况：http://jsfiddle.net/nubrF/40/ 如果你将鼠标悬停在动画元素的路径上，你会发现只有Firefox浏览器（而不是IE，Chrome或Safari）在目标元素经过鼠标指针时才会触发事件。

我有两个问题：

1. 这是正常的浏览器行为吗？ 2. 您推荐什么方法来模拟这些事件，并在目标元素经过鼠标指针时得到通知？

我应该提到，我已经考虑过鼠标的pageX和pageY以及页面上元素的位置，但这种解决方案似乎很复杂，也不太干净。

谢谢您的帮助。

- Ioan Orzetic

Answer 1

是的，这是正常行为。解决此问题的方法可能是放弃使用mouseleave/mouseenter并将mousemove事件绑定到文档上。从那里，获取页面上鼠标指针的位置和动画元素的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绑定到整个页面，因为您需要在页面上鼠标移动到的任何位置更新鼠标的lastx和lasty位置，而不仅仅是在包含动画的div内部。

- izb