使用for循环将onclick方法附加到多个画布上
Attaching onclick method to multiple canvas using a for loop
我需要添加一个onclick函数到多个画布在一个。我使用for循环遍历所有画布,然后添加onclick事件与attachEvent
。
我已经尝试了一个事件监听器或直接添加onclick事件,但似乎没有任何工作,请让我知道,如果你能看到我的错误…
这是我的JavaScript代码:
//here's the loop where the canvas get their width, height and onclick
//event.
function canvasSize() {
var canvas=document.getElementsByTagName('canvas');
var ctx;
for (var i=0;i<canvas.length;i++) {
canvas[i].width="50";
canvas[i].height="50";
ctx=canvas[i].getContext('2d');
ctx.fillRect(0,0,50,50);
ctx.fillStyle="blue";
canvas[i].attachEvent("click", onClick(this,"voitures"));
}
};
//onclick() function
function onClick(elem,theme) {
var images=preloadImages(theme);
var canvas=getElementsByTagName("canvas");
for (var i=0;i<canvas.length;i++) {
if (canvas[i]==elem) {
elem.drawImage(images[0],0,0)
}
}
};
//function where I preload every images
function preloadImages(theme) {
var tab=[];
var imageObj= new Image();
if (theme=="cars") {
tab[0]="0.jpg"
tab[1]="1.jpg"
tab[2]="2.jpg"
tab[3]="3.jpg"
tab[4]="4.jpg"
tab[5]="5.jpg"
tab[6]="6.jpg"
tab[7]="7.jpg"
tab[8]="8.jpg"
tab[9]="9.jpg"
tab[10]="10.jpg"
tab[11]="11.jpg"
tab[12]="12.jpg"
//...
}
for (var i=0;i<32;i++) {
imageObj.src=tab[i];
//imageObj.onload=alert("img "+i+" is loaded");
}
return tab;
}
}
在添加onclick函数之前代码崩溃。
一:attachEvent
仅在IE中可用。
二:不要命名函数onClick
它是一个保留的全局事件处理程序。
所以要修复你的for
循环,我将把你的最后一行改为:
for (var i=0;i<canvas.length;i++) {
var self = this;
if(window.attachEvent){
canvas[i].attachEvent("click", function(){
newNameForOnClickFunction(self, "voitures");
}, false);
}else{
canvas[i].addEventListener("click", function(){
newNameForOnClickFunction(self, "voitures");
}, false);
}
}
我敢打赌,你想传递canvis到你的下一个函数,而不是引用你的canvasSize
函数。如果是这种情况,那么你应该传递canvas[i]
而不是this
(或self
在我上面的例子)
相关文章:
- 为什么JavaScript在for循环为3时向所有4发出警报
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- 我的javascript for循环不起作用
- For循环冻结Javascript
- 如何在for循环中添加事件侦听器
- 双“for”循环(循环)
- javascript for循环不起作用
- for循环中的javascript if语句找不到==
- Javascript在for循环中等待处理请求
- 我没有'I don’我不理解for在循环中的用途
- 为什么在 Javascript 中使用空的 for 循环 - for(;;).
- 错误后如何停止循环“FOR”
- 如何使用循环 for 与 java 脚本一起检查输入中的值
- 如何正确使用ngRepeat,同时使用循环for
- 是否可以使用循环(for/while)来制作动画?
- 在循环for循环时如何进入和退出
- Javascript原型循环for in数组
- 在对象数组中循环for
- Javascript循环:for循环工作,但不能映射
- 如何创建一个循环"for"在json