event.pageX不在Firefox中工作，但在Chrome中 [英] event.pageX not working in firefox, but does in Chrome

问题描述

所以我有我认为是一个简单的问题，但大约一个星期的寻找解决方案后，我似乎无法找到背后的原因。

p>基本上我每次点击鼠标都会调用下面的函数，而且在Chrome中可以正常工作，但是在Firefox中， alert（This is not called）永远不会被获取我知道问题出在两行代码中：

 <$ c 
 $ c> x = event.pageX  -  canvas.offsetLeft; 
 y = event.pageY  -  canvas.offsetTop; 
  

但似乎无法找到最新的错误。 Mozilla网站表示 event.pageX 是一个合法的命令，
以及 canvas.offsetLeft 。

但函数仍然没有被调用。我已经试过在函数中定义变量而不是在全局变量，这是行不通的，并尝试了一些其他的选择，包括一个jQuery事件处理程序，但我想尽量远离jQuery，如果可能的话，主要是因为我想知道这里发生了什么事情，而不是找到一些补丁。

任何帮助将不胜感激，非常感谢您的时间

另外，相关网站是 http://cabbibo.com a
$ b $编辑：
如果它有帮助的话，在Firefox中的其余的JavaScript运行速度非常缓慢，这导致我相信它可能是在代码中的其他地方出现问题，例如当侧面导航打开时，每次调用动画的函数时，都需要更长的时间。

Isaac

 函数q（event）{
 if（hasBeenCalled == 0）{
e发泄=事件|| 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 =canvasonclick =q（）width =1000 height =900>< / canvas> 
 
函数q（事件）{
 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 =canvaswidth =1000height =900>< / canvas> 
 
 var canvasElem = document.getElementById（'canvas'）; 
 canvasElem.addEventListener（click，q，false）; 
 
函数q（事件）{
 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/ p>

So 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 everytime 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, And thank you very much for your time

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.

Isaac

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

解决方案

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/

这篇关于event.pageX不在Firefox中工作，但在Chrome中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！