4

我这里有这个例子来说明情况：http: //jsfiddle.net/nubrF/40/

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

我其实有两个问题：

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

  2. 您推荐什么方法以某种方式模拟这些事件并在目标元素通过鼠标指针时得到通知？

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

谢谢你的帮助。

4

1 回答 1

5

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

于 2012-05-09T12:45:06.470 回答