的mouseenter /鼠标离开事件不会触发

Question

我有这样的例子在这里说明情况： http://jsfiddle.net/nubrF/40/

如果按住鼠标到动画元素的路径当目标元素通过鼠标指针“下方”时，您可以观察到事件仅在Firefox中触发（不在IE，Chrome或Safari中）。

其实我有两个问题：

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

2. 你推荐什么方法来模拟这些事件，并在目标元素通过鼠标指针时获得通知？

我要指出，我已经想过pageX属性和鼠标，并在页面元素的位置的pageY但这种方法看起来很复杂，不是很干净。

感谢您的帮助。

Answer 1

是的，这是正常的行为。一种方法可能是放弃mouseleave/mouseenter并将mousemove事件绑定到文档。从那里，获取页面上的鼠标指针位置和偏移量（），带有动画元素的（）和高度（）。如果从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内。