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 イベントが発生することです。アイテムに入り、すぐにアイテムを離れ、1 秒後にサブアイテムがまだ表示されます。したがって、メニュー項目が既に表示されているかどうかにかかわらず、mouseleave イベント内で何らかのチェックが必要です。その後、メニュー項目がまだ表示されていない場合は、mouseenter イベントを停止できます... mouseleave イベントの関数から mouseenter イベントに応答する方法がわかりません...誰かがこれを理解してくれることを願っています...

前もって感謝します。

4

1 に答える 1

2

タイマーとclearTimeouton mouseleave を使用します ( $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 に答える