JavaScript Ausführung letzte EventListener auf allen Elementen

Question

Ich arbeite derzeit an einem Projekt, das 4 Canvas-Elemente enthält. Wenn ein Element auf ein Element klickt, wird ein Ereignis ausgelöst, das den Inhalt der Arbeitsfläche zeichnet.

function canvasItem(cv, ctx, id){ 
    this.cv = cv; 
    this.ctx = ctx; 
    this.id = id; 
} 

canvasItem.prototype.drawLine = function(){ 
    console.log("drawing "+this.id); 
} 

var lineView = { 
    canvasItems: [], 
    init : function(){ 
     items = document.getElementsByClassName("highlight"); 
     if(items){ 
      for(var i = 0; i<items.length; i++){ 
       var ctx = items[i].getContext("2d"); 
       var cv = items[i]; 
       this.canvasItems.push(new canvasItem(cv, ctx, i)); 
      } 
     } 
     this.addListeners(); 
    }, 
    addListeners : function(){ 
     var containers = document.getElementsByClassName("articleContainer"); 
     for(var i = 0; i<containers.length; i++){ 
      var currentItem = this.canvasItems[i]; 
      containers[i].addEventListener("click", currentItem.drawLine, false); 
     } 
    } 
} 

window.onload = function(){ 
    lineView.init(); 
} 

wird Jedes Canvas-Element drawing die Ausgabe zeigen, wenn er einen Klick erhält. Ich fand heraus, dass es die Variable i=4 verwendet und die canvasItems[4].drawLine Funktion ausführt.

Ich denke, dies könnte sein, weil es die Variable i per Referenz in der canvasItems[i].drawLine Linie passiert. Ich bin mir nicht sicher, ob das stimmt, aber ich hoffe, dass mir jemand zeigen kann, was ich falsch mache.

Unten ist das HTML-Muster, das vier Mal in der HTML-Seite auftritt:

<div class="articleContainer"> 
    <article> 
      <h3>Title</h3> 
      <p> 
       text 
      </p> 
     </article> 
     <canvas class="highlight"></canvas> 
</div> 

Answer 1

Es war in erster Linie eine Schließung Problem. Unten ist die Lösung.

for (var i = 0; i < containers.length; i++) { 
      (function (index) { 
       var currentItem = lineView.canvasItems[index]; 
       containers[index].onclick = function(){ 
        currentItem.drawLine(); 
       }; 
      }) (i); 
     }