当目标设置动画并在鼠标指针下传递时,mouseenter/mouseleave事件不会触发

Question

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

如果将鼠标放在动画元素的路径上,则可以观察到当目标元素在鼠标指针"下方"传递时,仅在Firefox(而不是IE,Chrome或Safari)中触发事件.

我实际上有两个问题:

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

2. 你建议用什么方法模拟这些事件,并在目标元素通过鼠标指针时得到注意？

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

谢谢你的帮助.

Answer 1

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

每次动画更新时都需要测试它,您可以使用动画步骤功能进行测试.

例如

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