event.pageX not working in Firefox, but does in Chrome

问题

I am having what I thought was a simple problem, but after about a week of searching for the solution I can't seem to find the reason behind it.

Basically I am calling the function below every time the mouse is clicked, and it works fine in Chrome, but in Firefox the alert("This is not called") never gets called.

I know the problem is in the two lines of code:

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

but can't seem to find whats wrong. Mozillas site says that event.pageX is a legitimate command to call, and as well the canvas.offsetLeft.

But the function still isn't getting called. I have tried defining the variables in the function rather than globally, and that doesn't work, and have tried a few other alternatives out, including a jQuery event handler, but I want to try to stay away from jQuery if at all possible, mostly because I want to understand what's going on here, not just find something to patch over it.

Any help would be much appreciated.

also, the site in question is http://cabbibo.com.

EDIT: If it helps at all, the rest of the Javascript in Firefox is running very slowly, which leads me to believe it could be a problem somewhere else in the code, for example when the side navigation is opening, each time the function for the animation is called, it takes much longer then it should.

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{}
}

回答1:

Instead of doing this:

<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{}
}

Try this:

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