javascript - event.pageX 在 Firefox 中不起作用，但在 Chrome 中起作用

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/