點擊時獲取畫布元素的ID

Question

我想要獲取我點擊的畫布的ID，但是用我寫的代碼，我總是得到最後一個畫布的ID。是否有可能獲得多維數組的值？我應該把onclick事件放在switch case中嗎？

function drawFigures(figures) { 
    var frontDiv = document.createElement("div"); 
    frontDiv.setAttribute("id","frontDiv"); 
    document.getElementById('game').appendChild(frontDiv); 

    for(var y=0; y<figures.length; y++) { 
     fieldDiv = document.createElement("div"); 
     fieldDiv.setAttribute("class", "figureFieldDiv"); 
     frontDiv.appendChild(fieldDiv); 

     for(var x=0; x<figures[y].length; x++) { 
      var canvas = document.createElement("canvas"); 
      canvas.setAttribute("id", y+","+x); 
      canvas.width = 20; 
      canvas.height = 20; 
      var ctx = canvas.getContext('2d'); 
      fieldDiv.appendChild(canvas); 
      document.getElementById(y+","+x).onclick = function() {console.log(y+","+x)}, false; 
      switch(figures[y][x]) { 

       case 0: 
        break; 
       case 1: 
        ctx.fillStyle = "#F00"; 
        ctx.arc(canvas.width/3,canvas.width/3,canvas.width/3,0,360); 
        ctx.fill(); 
        break; 
       case 2: 
        ctx.fillStyle = "#0F0"; 
        ctx.arc(canvas.width/3,canvas.width/3,canvas.width/3,0,360); 
        ctx.fill(); 
        break; 
       case 3: 
        ctx.fillStyle = "#FF0"; 
        ctx.arc(canvas.width/3,canvas.width/3,canvas.width/3,0,360); 
        ctx.fill(); 
        break; 
       case 4: 
        ctx.fillStyle = "#00F"; 
        ctx.arc(canvas.width/3,canvas.width/3,canvas.width/3,0,360); 
        ctx.fill(); 
        break; 
       case 5: 
        break; 
       case 6: 
        ctx.fillStyle = "#0FF"; 
        ctx.arc(canvas.width/3,canvas.width/3,canvas.width/3,0,360); 
        ctx.fill(); 
        break; 
       case 7: 
        break; 
      } 
     } 
    } 
} 

Answer 1

在你所描述的一種方式的情況下是使用封閉，這樣的：

var id = y + "," + x; 
(function(id) { 
    document.getElementById(id).onclick = function() { 
     console.log(id); 
    }; 
})(id); 

然而，它始終是更容易使用（對於IE或AttachEvent）addEventListener代替：

document.getElementById(y+","+x).addEventListener("click", function() { 
    console.log(this.id); 
}, false); 

Answer 2

我建議你做到以下幾點：

var cElements = document.getElementsByTagName('canvas'); 
for (var i = 0; i < cElements.length; i++) { 
    cElements[i].onclick = getId; 
} 

function getId(event) { 
    console.log(this.id); 
}