我遇到了我认为是一个简单的问题,但在寻找解决方案大约一周后,我似乎找不到背后的原因。
基本上,每次单击鼠标时,我都会调用下面的函数,它在 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{}
}
最佳答案
而不是这样做:
<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/
关于javascript - event.pageX 在 Firefox 中不起作用,但在 Chrome 中起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10971738/