JavaScript在所有元素上執行最后一個eventListener

Question

我目前正在一個包含4個canvas元素的項目中。 在元素上單擊時，它將啟動一個事件，該事件繪制畫布的內容。

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

每個畫布元素在收到點擊后都會顯示輸出drawing 。 我發現它正在使用變量i=4並執行canvasItems[4].drawLine函數。

我認為這可能是因為它在canvasItems[i].drawLine行中通過引用傳遞了變量i 。 我不確定這是否正確，但希望有人能告訴我我做錯了什么。

以下是在HTML頁面中出現四次的HTML模式：

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

Answer 1

這主要是關閉問題。 下面是修復程序。

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