event.pageX 在 Firefox 中不起作用，但在 Chrome 中可以

Question

我遇到了我认为是一个简单的问题，但是经过大约一周的搜索解决方案，我似乎找不到背后的原因。

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

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

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

但似乎找不到问题所在。Mozillas网站说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 is null"错误：

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

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