1

我有一个关于 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 事件......我遇到但仍然无法解决的问题是 mouseenter 事件虽然会在我已经离开导航项时发生。我进入项目，立即离开项目，一秒钟后，子项目仍然出现。因此，我需要在 mouseleave 事件中进行某种检查，无论我的菜单项是否已显示。然后我可以停止 mouseenter 事件，如果 menuitem 仍然不可见...我不知道如何从 mouseleave 事件的函数响应 mouseenter 事件...希望有人理解这一点...

提前致谢。

4

1 回答 1

2

使用计时器和clearTimeout鼠标离开（也在$clear(timer)旧版本的 mootools 中）。

$('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');
        }
    });
});
于 2011-04-05T10:14:36.287 回答