event.pageX在Firefox中不工作，但在Chrome中工作

Z时代
2024-01-10
分类：问答

所以我有我认为是一个简单的问题，但大约一个星期寻找解决方案后，我似乎无法找到它背后的原因。event.pageX在Firefox中不工作，但在Chrome中工作

基本上我每次点击鼠标都会调用下面的函数，并且它在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{} 
}

回答：

您的网站（http://cabbibo.com/）抛出一个 “canvas3为空” 的错误在线61：

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

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

回答：

而不是做这个的：

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