Javascript 单击时获取画布元素的ID

我想得到我点击的画布的ID，但是用我写的代码，我总是能得到最后一块画布的ID。是否有可能获得多维数组的值？我应该把onclick事件放在开关盒中吗

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

功能图（图）{
var frontDiv=document.createElement（“div”）；
frontDiv.setAttribute（“id”、“frontDiv”）；
document.getElementById（'game'）.appendChild（frontDiv）；
对于（var y=0；y，在您描述的情况下，一种方法是使用闭包，如下所示：

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

但是，它总是更容易使用（或IE的
AttachEvent
）：

我建议你做以下几点：

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

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

var celeents=document.getElementsByTagName（'canvas'）；
对于（var i=0；i
很好谢谢您对
addEventListener
的建议，这非常适合我
var cElements = document.getElementsByTagName('canvas');
for (var i = 0; i < cElements.length; i++) {
    cElements[i].onclick = getId;
}

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