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