如何通过动画鼠标悬停来阻止事件冒泡/多个事件？

Question

我注意到很多关于此的 JQuery 答案，但我正在使用 MooTools...

我有一个目录，它使用 CSS 固定定位将其保持在左侧，除了 20 像素。用户将光标悬停在 20 像素上，这会触发 DIV 的 mouseover 事件，并且 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 的内容也在触发事件，或者当鼠标在分区。

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

Answer 1

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

另外，你不应该在 MooTools 1.2+ 中这样做：

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

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