Question

我在这里举例说明情况： http://jsfiddle.net/nubrF/40/

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

我实际上有两个问题：

这是正常的浏览器行为吗？
您建议以何种方式模拟这些事件，并在目标元素通过鼠标指针时注意？

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

感谢您的帮助。

Answer 1

是的，这是正常行为。绕过它可能是放弃mouseleave / mouseenter并将mousemove事件绑定到文档。从那里，获取页面上的鼠标指针位置和动画元素的offset（），（）和height（）。如果从mousemove事件保存的最后一个点落在该区域内，则鼠标位于元素中。

每次动画更新时都需要对其进行测试，您可以使用animate step function进行测试。

e.g。

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绑定到整个页面，因为您需要更新鼠标在页面上移动的最后位置和最后位置，而不仅仅是在动画的包含div中。

当目标设置动画并通过鼠标指针传递时，mouseenter / mouseleave事件不会触发

1 个答案: