javascript - 使用 for 循环将 onclick 方法附加到多个 Canvas

Question

我需要将 onclick 函数添加到 .我使用 for 循环遍历所有 Canvas ，然后使用 attachEvent 添加 onclick 事件。

我已经尝试过使用事件监听器或直接添加 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 函数之前代码崩溃。希望有人能帮助我找出我的错误。

Answer 1

一:attachEvent仅在IE中可用。

两个:不要命名函数onClick它是保留的global event handler .

因此，为了修复您的 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)