使用 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>