Mootools：如何在其他事件發生時停止事件

Question

我有關於mootools事件處理的問題。

我想延遲一個鼠標事件的下拉導航。 1秒後，該drowdown名單將通過「的setStyle顯示（‘顯示’，‘塊’）......這是從來就走到這一步，和it's工作：

$('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仍然不可見...我不知道我如何能夠從mouseleave事件的功能響應mousenter事件...希望任何人都明白這一點...

在此先感謝。

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'); 
     } 
    }); 
});