如何使用动画鼠标停止冒泡/多个事件的事件？

Question

我注意到很多JQuery的答案,但我正在使用MooTools ......

我有一个目录使用CSS固定定位,以保持它在左侧,除了20像素.用户将光标悬停在20个像素上,这会触发DIV的鼠标悬停事件,并且ToC完全滑入页面.当光标离开时,ToC滑回原来的位置.

$('frameworkBreakdown').addEvents({
    'mouseover': function(event){
        event = new Event(event);
        $('frameworkBreakdown').tween('left', 20);
        event.stop;
    },
    'mouseout': function(event){
        event = new Event(event);
        $('frameworkBreakdown').tween('left', (10 - $('frameworkBreakdown').getStyle('width').toInt()) );
        event.stop;
    }
});

这很好用(除了不相关的问题),除了当我在DIV上移动鼠标时它开始抖动,大概是因为DIV的内容也在触发事件,或者当鼠标跟踪DIV时事件重新开始.

如何阻止此行为发生？是否有标准方法,或者我是否使用某种令人讨厌的全局变量来确定效果是否在起作用,从而忽略该事件？

Answer 1

使用mouseenter/mouseleave而不是mouseover/mouseout.

此外,你不应该在MooTools 1.2+中这样做:

event = new Event(event);
event.stop;

一个简单的event.stop()就足够了.