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

您的網站（http://cabbibo.com/）拋出一個 「canvas3爲空」 的錯誤在線61：

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

此錯誤停止的執行整個腳本，所以可以理解，q()中的警報也不會被調用。

Answer 2

而不是做這個的：

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