자바 스크립트의 기본 이벤트 지연

Question

다른 조치가 취해질 때까지 이벤트의 기본 동작을 지연하고 싶습니다.

무엇을 위해서 : 모달 형식 대화로 동작을 확인하기 위해 재사용이 가능하고 눈에 거슬리는 방법을 구축하려고합니다. 중요한 위시리스트 항목은 모든 자바 스크립트 핸들러가 스크립트에 의해 첨부되며 직접 인라인으로 작성되지 않는다는 것입니다.

정말 재사용이 가능하도록 다른 유형의 항목 (HTML 링크, 체크 상자 및 기타 자바 스크립트 기반 작업)에 사용하고 싶습니다. 그리고 링크 나 체크 상자와 같은 HTML 요소만으로는 정상적으로 성능이 저하되어 자바 스크립트가 켜지지 않아도 사용할 수 있습니다.

<a href="/somelink/" class="confirm">Some Link</a> 
_________ 

<script> 
    attachEvent('a.confirm','click', confirmAction.fire) 

    var confirmAction = (function(){ 
     var public = { 
      fire: function(e){ 
       e.default.suspend(); 
       this.modal(); 
      }, 
      modal: function(){ 
       showmodal(); 
       yesbutton.onclick = this.confirmed; 
       nobutton.onclick = this.canceled; 
      }, 
      confirmed: function(){ 
       hidemodal(); 
       e.default.resume(); 
      }, 
      canceled: function(){ 
       hidemodal(); 
       e.default.prevent(); 
      } 
     } 
     return public; 
    })() 

</script> 

내가 e.preventDefault 기능에 대해 알고 있지만, 나에게 그것을 재개 할 수있는 능력을 부여하지 않고 기본 동작을 죽일 것이다 : 여기

내가 구현을 구상 할 방법입니다. 분명히 suspend, resume 및 prevent 방법을 사용하는 default 개체는 필자가 원하는 목적을 설명하기 위해 만들어졌습니다.

그건 그렇고, 도움이된다면, Ext.Core 라이브러리를 사용하여 이것을 구축하고 있습니다. 라이브러리는 이벤트를 처리하기 위해 많은 양의 정규화를 제공합니다. 그러나 저는 Javascript로이 일반적인 원리를 배우는데 정말로 관심이 있습니다.

감사합니다.

Answer 1

다시 시작하려면 suspend() (예 : 'confirmAction.fire')를 호출하는 처리기를 건너 뛰는 데 사용할 수있는 플래그를 설정하여 이벤트를 저장하고 다시 실행 해보십시오.

<a href="/somelink/" class="confirm">Some Link</a> 
_________ 

<script> 
function bindMethod(self, method) { 
    return function() { 
     method.apply(self, arguments); 
    } 
} 
var confirmAction = (function(){ 
    var public = { 
      delayEvent: function(e) { 
       if (e.suspend()) { 
        this.rememberEvent(e); 
        return true; 
       } else { 
        return false; 
       } 
      }, 
      fire: function(e){ 
       if (this.delayEvent(e)) { 
        this.modal(); 
       } 
      }, 
      modal: function(){ 
        showmodal(); 
        yesbutton.onclick = bindMethod(this, this.confirmed); 
        nobutton.onclick = bindMethod(this, this.canceled); 
      }, 
      confirmed: function(){ 
        hidemodal(); 
        this.rememberEvent().resume(); 
      }, 
      canceled: function(){ 
        hidemodal(); 
        this.forgetEvent(); 
      }, 
      rememberEvent: function (e) { 
       if (e) { 
        this.currEvent=e; 
       } else { 
        return this.currEvent; 
       } 
      }, 
      forgetEvent: function() { 
       delete this.currEvent; 
      } 
    } 
    return public; 
})() 

// delayableEvent should be mixed in to the event class. 
var delayableEvent = (function(){ 
    return { 
     suspend: function() { 
      if (this.suspended) { 
       return false; 
      } else { 
       this.suspended = true; 
       this.preventDefault(); 
       return true; 
      } 
     }, 
     resume: function() { 
      /* rest of 'resume' is highly dependent on event implementation, 
       but might look like */ 
      this.target.fireEvent(this); 
     } 
    }; 
})(); 

/* 'this' in event handlers will generally be the element the listener is registered 
* on, so you need to make sure 'this' has the confirmAction methods. 
*/ 
mixin('a.confirm', confirmAction); 
attachEvent('a.confirm','click', confirmAction.fire); 
</script> 

이것은 다른 이벤트 리스너와 상호 작용하는 방식과 같은 잠재적 인 버그가 여전히 있습니다.