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

每个canvas元素在收到点击时都会显示输出drawing。我发现它正在使用变量i=4并执行canvasItems[4].drawLine函数。

我认为这可能是因为它在i行中通过引用传递变量canvasItems[i].drawLine。我不确定这是否正确，但我希望有人能告诉我我做错了什么。

下面是在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);
        }

JavaScript在所有元素上执行最后一个eventListener

1 个答案: