javascript - event.pageX not working in Firefox, but does in Chrome - Stack Overflow

admin管理员组

文章数量:1435254

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 every time 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 mand 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.

also, the site in question is .

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.

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

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 every time 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 mand 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.

also, the site in question is http://cabbibo..

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.

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

• javascript
• firefox
• event-handling
• html5-canvas
• dom-events

Share Improve this question Follow edited Oct 20, 2019 at 8:49 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jun 10, 2012 at 19:36 CabbiboCabbibo 1,41133 gold badges1818 silver badges3232 bronze badges 3

• You have a typo event = event || window.event... ; missing – micadelli Commented Jun 10, 2012 at 19:40
• Sorry, that was a typo when I was posting it, the actual code has it there, Ill fix it in the question though. Thanks! – Cabbibo Commented Jun 10, 2012 at 19:43
• 4 @micadelli - ; is not required in JavaScript. – Derek 朕會功夫 Commented Jun 10, 2012 at 19:43

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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/5Xs2S/3/

Your site (http://cabbibo./) throws an "canvas3 is null" error on line 61:

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

This error halts the execution of the entire script, so understandably the alert in q() does not get called either.

本文标签： javascripteventpageX not working in Firefoxbut does in ChromeStack Overflow