Mootools : 다른 이벤트가 발생할 때 이벤트를 중지하는 방법

Question

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

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

I've을 : 일초 후 drowdown 목록의 setStyle "으로 표시됩니다 ('디스플레이', '블록') ...이 i've 지금까지 얻고, 작업 오기 '무엇인가 지연 기능을 사용하여 mouseenter 이벤트를 지연 ... 내가 가지고있는 문제는 해결할 수 없습니다. 내 탐색 항목을 이미 떠났을 때 mouseenter 이벤트가 발생합니다. 항목을 입력하고 즉시 항목을 남겨두고 두 번째로 하위 항목이 계속 나타나므로 mouseleave 이벤트 내에서 어떤 종류의 검사가 필요합니다. menuitem이 이미 표시되어 있거나 표시되어 있지 않습니다. 그런 다음 menuitem이 아직 표시되지 않으면 mouseenter 이벤트를 중지 할 수 있습니다. 어떻게 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'); 
     } 
    }); 
});