Javascript 使用未返回正确索引的for循环将事件侦听器添加到画布

我正在尝试将事件侦听器添加到动态画布。我没有为每个画布手动编写事件侦听器，而是使用for循环。问题是，当我单击canvas1时，它返回id 3。假设是1

<canvas id="canvas1"></canvas>
<canvas id="canvas2"></canvas>

<script>

var canvas = []
var totalCanvas = 2

for(var i=1;i<=totalCanvas;i++){
    canvas[i] = document.getElementById('canvas'+i);
    canvas[i].addEventListener('mousedown', function(e) { onMouseDown(e,i) }, false);
}

function onMouseDown(e,i){
    console.log('ID'+i) //returning 3
}

</script>

var canvas=[]
var totalCanvas=2
对于（var i=1；i而言，问题在于，当您引发
mousedown
事件时，循环已经完成，并且
i
始终处于循环中设置的最后一个值

解决此问题的一种方法是将事件处理程序包装在闭包中，以保留
i
值的状态：


var canvas=[]
var totalCanvas=2
对于（var i=1；i而言，问题在于，当您引发
mousedown
事件时，循环已经完成，并且
i
始终处于循环中设置的最后一个值

解决此问题的一种方法是将事件处理程序包装在闭包中，以保留
i
值的状态：


var canvas=[]
var totalCanvas=2
对于（var i=1；i
var canvas=[]；
var=2；
对于（var i=1；i
var canvas=[]；
var=2；
对于（var i=1；i