Javascript Callback-Funktion zweimal feuern

Question

Ich habe vier Eingänge, denen ich ein Ereignis hinzufügen möchte.

Ich habe eine neue Funktion auf dem

HTMLCollective erstellt

HTMLCollection.prototype.eachOnClick = function(callback){ 
 
    var len = this.length 
 
    var j = 0 
 
    for(var i = 0; i < len; i++){ 
 
     let elem = this.item(i) 
 
     document.addEventListener('click',() => { 
 
      callback(elem) 
 
     }) 
 
    } 
 
} 
 

 
document.getElementsByClassName('blog-search-filters').eachOnClick(function(elem){ 
 
    // if elem.checked do something 
 
    // else do something else 
 
    console.log(elem); 
 
})

<div class="blog-search-filters">a</div> 
 
<div class="blog-search-filters">b</div>

Das Problem ist, dass alle vier der Eingang Rückrufe zweimal auf eines dieser Elemente beim Anklicken ausgeführt, so dass die Callback-Funktion ist 8 Mal angerufen werden.

Was fehlt mir hier?

Jede Hilfe sehr geschätzt.

Prost

Answer 1

scheint Sie click Element behandeln müssen, nicht dokumentieren.

HTMLCollection.prototype.eachOnClick = function(callback){ 
    var len = this.length 
    var j = 0 
    for(var i = 0; i < len; i++){ 
     let elem = this.item(i); 

     //use elem reference here 
     elem.addEventListener('click',() => { 
      callback(elem) 
     }) 
    } 
}