Question

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

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

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

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

但似乎无法找到什么错误。 Mozillas site说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{}
}

Answer 1

而不是这样做：

<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/

Answer 2

您的网站（http://cabbibo.com/）在第61行引发“canvas3为空”错误：

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

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

event.pageX无法在Firefox中运行，但在Chrome中运行

2 个答案: