我想获取我点击的 Canvas 的ID,但是使用我编写的代码,我总是获取最后一个 Canvas 的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;
}
}
}
}
最佳答案
在您描述的情况下,一种方法是使用闭包,如下所示:
var id = y + "," + x;
(function(id) {
document.getElementById(id).onclick = function() {
console.log(id);
};
})(id);
但是,使用 addEventListener
总是更容易(对于 IE 则为 AttachEvent
):
document.getElementById(y+","+x).addEventListener("click", function() {
console.log(this.id);
}, false);
关于javascript - 单击时获取 Canvas 元素的 ID,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16918353/