3

我遇到了我认为是一个简单的问题，但是在寻找解决方案大约一周后，我似乎无法找到其背后的原因。

基本上每次点击鼠标时我都会调用下面的函数，它在 Chrome 中运行良好，但在 Firefox 中alert("This is not called")永远不会被调用。

我知道问题出在两行代码中：

x = event.pageX - canvas.offsetLeft;
y = event.pageY - canvas.offsetTop;

但似乎找不到什么问题。Mozilla 的网站说这event.pageX是一个合法的调用命令，canvas.offsetLeft.

但是该函数仍然没有被调用。我尝试在函数中而不是全局定义变量，但这不起作用，并尝试了其他一些替代方案，包括 jQuery 事件处理程序，但我想尽可能远离 jQuery，主要是因为我想了解这里发生了什么，而不仅仅是找到修补它的东西。

任何帮助将非常感激。

此外，有问题的网站是http://cabbibo.com。

编辑：如果它有帮助，Firefox 中的其余 Javascript 运行速度非常慢，这让我相信这可能是代码中其他地方的问题，例如，当侧面导航打开时，每次函数动画被调用，它需要更长的时间。

function q(event){  
    if(hasBeenCalled==0){       
        event = event || window.event;
        var canvas = document.getElementById('canvas');

        x = event.pageX - canvas.offsetLeft;
        y = event.pageY - canvas.offsetTop;

        alert("This Is Not Called");

        Changer2();
        stopDraw();
        moveToCenter();

        t = setInterval(rotateDrawRec, 1);
    }else{}
}
4

2 回答 2

2

而不是这样做：

<canvas id="canvas" onclick="q()"  width="1000" height="900"></canvas>

function q(event){  
    if(hasBeenCalled==0){       
        event = event || window.event;
        var canvas = document.getElementById('canvas');

        x = event.pageX - canvas.offsetLeft;
        y = event.pageY - canvas.offsetTop;

        alert("This Is Not Called");

        Changer2();
        stopDraw();
        moveToCenter();

        t = setInterval(rotateDrawRec, 1);
    }else{}
}

尝试这个：

<canvas id="canvas" width="1000" height="900"></canvas>

var canvasElem = document.getElementById('canvas');
canvasElem.addEventListener("click", q, false);

function q(event){  
    if(hasBeenCalled==0){       
        event = event || window.event;

        x = event.pageX - this.offsetLeft;
        y = event.pageY - this.offsetTop;

        alert("This Is Not Called");

        Changer2();
        stopDraw();
        moveToCenter();

        t = setInterval(rotateDrawRec, 1);
    }else{}
}

JSFiddle：http:
//jsfiddle.net/5Xs2S/3/

于 2012-06-10T20:51:57.243 回答
1

您的网站 (http://cabbibo.com/) 在第 61 行抛出“canvas3 is null”错误：

var ctx3 = canvas3.getContext("2d");

此错误会停止整个脚本的执行，因此可以理解的是，警报q()也不会被调用。

于 2012-06-10T20:51:25.330 回答