Mootools：当其他事件发生时如何停止事件

Question

我有一个关于 mootools 事件处理的问题。

我想延迟下拉导航的 mouseenter 事件。 1 秒后，下拉列表将通过“setStyle('display', 'block') 显示...这是我到目前为止所得到的，并且它正在工作：

$('main-nav').getElements('li.level-1 ul.quick-nav').setStyle('display', 'none');

                            $('main-nav').getElements('li.level-1').each(function(elem){
                               var list = elem.getElement('.quick-nav');

                                elem.addEvents({
                                    'mouseenter' : function(event){                                                                                     
                                        (function() {
                                            elem.getElement('.quick-nav').setStyle('display', 'block');
                                        }).delay(1000)},
                                    'mouseleave' : function(event){                                               
                                            elem.getElement('.quick-nav').setStyle('display', 'none');
                                        }
                                });
                            });

我已经延迟了 mouseenter 事件的延迟功能...我遇到但仍然无法解决的问题是，当我已经离开导航项目时，鼠标输入事件将会发生，然后立即离开该项目，一秒钟后，子项目仍然出现。因此需要在 mouseleave 事件中进行某种检查，我的 menuitem 是否已经显示，然后我可以停止 mouseenter 事件，如果 menuitem 仍然不可见......我不知道如何响应 mouseenter 事件。来自 mouseleave 事件的功能...希望有人理解这一点...

提前致谢。

Answer 1

在 mouseleave 上使用计时器和 clearTimeout（在旧版本的 mootools 中也使用 $clear(timer)）。

$('main-nav').getElements('li.level-1 ul.quick-nav').setStyle('display', 'none');

$('main-nav').getElements('li.level-1').each(function(elem) {
    var list = elem.getElement('.quick-nav');
    var timer;
    elem.addEvents({
        'mouseenter': function(event) {
            timer = (function() {
                elem.getElement('.quick-nav').setStyle('display', 'block');
            }).delay(1000)
        },
        'mouseleave': function(event) {
            clearTimeout(timer);
            elem.getElement('.quick-nav').setStyle('display', 'none');
        }
    });
});