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()中的警報也不會被調用。