2012-05-09 79 views
3

我有这样的例子在这里说明情况: http://jsfiddle.net/nubrF/40/的mouseenter /鼠标离开事件不会触发

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

其实我有两个问题:

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

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

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

感谢您的帮助。

回答

4

是的,这是正常的行为。一种方法可能是放弃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内。

+0

谢谢你的回答! –