如何添加事件侦听器,删除它,然后再次添加它



我有一个Chrome日历应用程序,可以显示当前月份。我还有"下个月"one_answers"上个月"按钮,根据显示的月份来选择下个月和上个月。然而,我只希望日历最长到当年的12月和1月,所以在用户点击12/1月后,我删除了事件处理程序。但是,当不是12月或1月时,我需要再次添加事件处理程序。我该怎么做?

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

我认为一个更简单的方法是不删除点击侦听器,而是在当前月份递增/递减之前立即返回。

例如,下个月的处理程序将是:

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

从可用性的角度来看,一个简单而优雅的解决方案是只添加另一个事件处理程序,每个事件处理程序对应"下个月"one_answers"前几个月"按钮,以便在达到某个限制时将其停用。通过这种方式,浏览器将为您完成工作(不允许用户单击它们),用户还将获得他们已经达到极限的视觉反馈。

function checkMonth(currentMonth)
{
    if(currentMonth == 12){
        document.getElementById("nextMonth").disabled = true;
    } else {
        document.getElementById("nextMonth").disabled = false;
    }
    if(currentMonth == 1){
        document.getElementById("previousMonth").disabled = true;
    } else {
        document.getElementById("previousMonth").disabled = false;
    }
}

只需在已有的两个按钮的事件处理程序中调用此函数。

我还没有检查过这个功能,也许你甚至可以对它进行一点优化,但这是我想要的方法。

相关内容

  • 没有找到相关文章

最新更新