Javascript 如何重写此函数以避免addeventlistener多次触发

我需要一些帮助来重写这个函数。我没有更多的想法了

该函数从onclick按钮开始

我做错了什么？我应该附加一个类来知道按钮是何时第一次被点击的吗

我尝试了所有我能想到的方法，创建全局变量，看看主函数之前是否被访问过，如果是，它将删除事件侦听器。我在函数首次访问时附加了一个类。我没有主意了

谢谢你的帮助

function activareEvent(cauta){
  if(flag==1)
  {
    rezultat = rezultat1;
  }
  cautare = document.getElementById("cautare"+cauta);
  innermenu = document.getElementById("innermenu"+cauta);
  myDropdown=document.getElementById("myDropdown"+cauta);
  categoriego=document.getElementById("categoriego"+cauta);
  hiddencat=document.getElementById("hiddencat"+cauta);
  countscroll=0;
  counter=0;
  var mouseovr = function(e){
    if(flag==1)
    {
      rezultat = rezultat1;
    }
    for (i = 0; i < rezultat.length; i++) {
      document.getElementById(i).style.background = "";
    }
    countscroll=e.target.id;
    document.getElementById(countscroll).style.background = "#ddd";
  }
  innermenu.addEventListener('mouseover', mouseovr, false);
  var clickasc = function(e){
    if(flag==1)
    {
      rezultat = rezultat1;
    }
    categoriego.innerHTML=rezultat[countscroll][2];

    eacha=[];
    rezultata=[];
    counter=0;
    for (i = 0; i < rezultat.length; i++) {
      if (rezultat[i][0]==(rezultat[countscroll][1]))
      {
    eacha[i] = "<a id="+counter+">"+rezultat[i][2]+"("+rezultat[i][1]+")"+"</a>";
    rezultata.push([rezultat[i][0],rezultat[i][1], rezultat[i][2]]);
    counter++;
      }


    }
    if(rezultata.length>0){
      innermenu.innerHTML =eacha.join("");
      rezultat=rezultata;
    }
    else{
      hiddencat.value=rezultat[countscroll][1];
      innermenu.innerHTML = "";
      myDropdown.classList.toggle("show");
      document.getElementById(0).style.background = "#ddd";
      rezultat=[];
      countscroll=0;
      counter=0;
      innermenu.removeEventListener('keydown', mouseovr);
      innermenu.removeEventListener('keydown', clickasc);
      cautare.removeEventListener('keydown', cautaresc);
    }
  }
  innermenu.addEventListener('click', clickasc, false);
  var cautaresc = function(e){
    if(flag==1)
    {
      rezultat = rezultat1;
    }
    document.getElementById(countscroll).style.background = "";
    if(e.which == 38){
      countscroll--;
      if(countscroll<0)
      {
    countscroll=0;
      }
    }
    if(e.which == 40){
      countscroll++;
      if(countscroll==rezultat.length)
      {
    countscroll=rezultat.length-1;
      }
    }
    document.getElementById(countscroll).style.background = "#ddd";
    if(e.which == 13){
      categoriego.innerHTML=rezultat[countscroll][2];
      eacha=[];
      rezultata=[];
      counter=0;
      for (i = 0; i < rezultat.length; i++) {
    if (rezultat[i][0]==(rezultat[countscroll][1]))
    {
      eacha[i] = "<a id="+counter+">"+rezultat[i][2]+"("+rezultat[i][1]+")"+"</a>";
      rezultata.push([rezultat[i][0],rezultat[i][1], rezultat[i][2]]);
      counter++;
    }
      }
      if(rezultata.length>0){
    innermenu.innerHTML =eacha.join("");
    document.getElementById(0).style.background = "#ddd";
    rezultat=rezultata;
    console.log(counter);
      }
      else{
    hiddencat.value=rezultat[countscroll][1];
    innermenu.innerHTML = "";
    myDropdown.classList.toggle("show");
    rezultat=[];
    countscroll=0;
    counter=0;
    innermenu.removeEventListener('keydown', mouseovr);
    innermenu.removeEventListener('keydown', clickasc);
    cautare.removeEventListener('keydown', cautaresc);
      }
    }
  }
  cautare.addEventListener('keydown', cautaresc, false);
}

功能激活事件（cauta）{
如果（标志==1）
{
rezultat=rezultat1；
}
cautare=document.getElementById（“cautare”+cauta）；
innermenu=document.getElementById（“innermenu”+cauta）；
myDropdown=document.getElementById（“myDropdown”+cauta）；
categoriego=document.getElementById（“categoriego”+cauta）；
hiddencat=document.getElementById（“hiddencat”+cauta）；
countscroll=0；
计数器=0；
var mouseovr=函数（e）{
如果（标志==1）
{
rezultat=rezultat1；
}
对于（i=0；i0）{
innermenu.innerHTML=eacha.join（“”）；
rezultat=rezultata；
}
否则{
hiddencat.value=rezultat[countscroll][1]；
innermenu.innerHTML=“”；
myDropdown.classList.toggle（“显示”）；
document.getElementById（0.style.background=“#ddd”；
rezultat=[]；
countscroll=0；
计数器=0；
innermenu.removeEventListener（'keydown'，mouseovr）；
innermenu.removeEventListener（“向下键”，单击ASC）；
cautare.removeEventListener（'keydown'，cautaresc）；
}
}
innermenu.addEventListener（'click'，clickasc，false）；
var cautaresc=功能（e）{
如果（标志==1）
{
rezultat=rezultat1；
}
document.getElementById（countscroll.style.background=”“；
如果（e.which==38）{
计数卷轴--；
如果（0）{
innermenu.innerHTML=eacha.join（“”）；
document.getElementById（0.style.background=“#ddd”；
rezultat=rezultata；
控制台日志（计数器）；
}
否则{
hiddencat.value=rezultat[countscroll][1]；
innermenu.innerHTML=“”；
myDropdown.classList.toggle（“显示”）；
rezultat=[]；
countscroll=0；
计数器=0；
innermenu.removeEventListener（'keydown'，mouseovr）；
innermenu.removeEventListener（“向下键”，单击ASC）；
cautare.removeEventListener（'keydown'，cautaresc）；
}
}
}
cautar.addEventListener（'keydown'，cautaresc，false）；
}

这个函数非常庞大，我不是很有经验，但我想说的是，一个函数应该有15行或者20行，这里有太多的内容，很难轻松调试代码。可能从主函数中提取一些辅助函数。同样，所有的I/OR语句都会使代码难以扩展，您可能会考虑将该逻辑写入类而不是函数实现。我不太清楚您在这里需要什么，但我还是要试一试：

将事件侦听器附加到具有标志属性的自定义类，然后检查函数中的属性

类别定义

export class foo {
  constructor(HTMLElemenet){
    this.HTMLElement = HTMLElement
  }
  flag = true
  attachEventListener(){
    if(this.flag){
      //just an example, you can add any event listener here
      this.HTMLElement.addEventListener('click',()=>{})
      this.flag = false
    }
}

代码

var baz = new foo
baz.attachEventListener(docuement.getElementById('bar'))

---

117行代码不完全是一个问题，您能否只包含与问题相关的代码部分？