Wie Sie einen Ereignis-Listener hinzufügen, entfernen und erneut hinzufügen?

Question

Ich habe eine Chrome-Kalender-App, die den aktuellen Monat anzeigt. Ich habe auch die nächsten Schaltflächen Monat und Vormonat, die den nächsten und vorherigen Monat abhängig von dem Monat angezeigt werden. Allerdings möchte ich nur, dass der Kalender bis Dezember des aktuellen Jahres und Januar des aktuellen Jahres geht, also nachdem der Benutzer Dezember/Januar trifft, entferne ich den Event-Handler. Aber ich muss den Event-Handler wieder hinzufügen, wenn es nicht Dezember oder Januar ist. Wie soll ich das machen?

var count = 0; 


var updated = setInterval(function() { 

var v = document.getElementById("CalendarMonth").innerHTML; 

updatedMonth = months.indexOf(v); 

}, 1000); 




document.getElementById("nextMonth").addEventListener("click", nxtMonth); 

function nxtMonth() 
{ 
    count = count +1; 


    if(nextMonth == 11) 
    { 
     console.log("the year has ended!"); 
     document.getElementById("nextMonth").removeEventListener("click", nxtMonth); 
    } 

else 
{ 
    nextMonth = updated + count; 
//ideally, this would work. But for some reason it does not 
    document.getElementById("nextMonth").addEventListener("click", nxtMonth); 

} 

document.getElementById("previousMonth").addEventListener("click", prevMonth); 

function prevMonth() 
{ 
    count = count -1; 


if(previousMonth == -1) 
     { 
     console.log("the year has just started!"); 

        document.getElementById("previousMonth").removeEventListener("click", prevMonth); 
     } 
     else if(count==-1) 
     { 
     previousMonth =1; 
     } 

     else 
     { 
      previousMonth = updated + count; 
      document.getElementById("previousMonth").addEventListener("click", prevMonth); 

     } 

Answer 1

Nun, ich denke ein einfacher Ansatz wäre einfach nicht den Klick-Listener zu entfernen und stattdessen nur sofort zurück, bevor Erhöhungs/den aktuellen Monat Erniedrigen.

zum Beispiel also der nächste Monat Handler wäre:

if (nextMonth == 11) { 
    return; 
} 
count++; 

Answer 2

Eine einfache und elegante Lösung aus der Usability-Sicht wäre nur einen weiteren Event-Handler hinzufügen, eine für jede des „nächsten Monat "und" vorhergehende Monate "-Schaltflächen, um sie zu deaktivieren, wenn eines der Grenzwerte erreicht ist. Auf diese Weise wird der Browser die Arbeit für Sie erledigen (es wird dem Benutzer nicht erlauben, auf sie zu klicken) und der Benutzer wird auch die visuelle Rückmeldung erhalten, dass sie das Limit erreicht haben.

Rufen Sie diese Funktion in Ihren bereits vorhandenen Event-Handlern für die beiden Schaltflächen auf.

Ich habe diese Funktion nicht überprüft und vielleicht kann ich sie sogar ein wenig optimieren, aber das ist der Ansatz, den ich haben würde.