使用 for 循环将事件侦听器添加到 canvas 不返回正确的索引

Question

我正在尝试将事件侦听器添加到动态 canvas。 我没有为每个 canvas 手动编写事件侦听器，而是使用了 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>

Answer 1

问题在于，当您引发mousedown事件时，循环已完成，并且i始终处于循环中设置的最后一个值。

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

 var canvas = [] var totalCanvas = 2 for (var i = 1; i <= totalCanvas; i++) { canvas[i] = document.getElementById('canvas' + i); (function(i) { canvas[i].addEventListener('mousedown', function(e) { onMouseDown(e, i) }, false) })(i); } function onMouseDown(e, i) { console.log('ID' + i) //returning 3 }

 canvas { width: 50px; height: 50px; } #canvas1 { background-color: #C00; } #canvas2 { background-color: #0C0; }

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

更好的方法是 select canvas元素并循环遍历它们，直接将事件处理程序分配给它们并使用forEach()的index参数来获取索引。

 var canvas = document.querySelectorAll('canvas'); canvas.forEach((el, i) => { el.addEventListener('mousedown', function(e) { onMouseDown(e, i + 1) }, false) }); function onMouseDown(e, i) { console.log('ID' + i) }

 canvas { width: 50px; height: 50px; } #canvas1 { background-color: #C00; } #canvas2 { background-color: #0C0; }

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

Answer 2

 var canvas = []; var totalCanvas = 2; for(var i=1;i<=totalCanvas;i++){ let a = i; canvas[i] = document.getElementById('canvas'+i); canvas[i].addEventListener('mousedown', function(e) { onMouseDown(e,a) }, false); } function onMouseDown(e,x){ console.log('ID'+x) //returning 3 }

 canvas { width: 50px; height: 50px; } #canvas1 { background-color: #C00; } #canvas2 { background-color: #0C0; }

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