javascript-event.pageX在Firefox中无法使用,但在Chrome中可以使用

因此,我遇到了一个我认为简单的问题,但是在寻找解决方案大约一周后,我似乎找不到其背后的原因.

基本上,每次单击鼠标时,我都会在下面调用该函数,它在Chrome中可以正常工作,但是在Firefox中,永远不会调用alert(“ This not named”).

我知道问题出在两行代码中：

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/

标签：firefox,event-handling,html5-canvas,javascript-events,javascript
来源： https://codeday.me/bug/20191201/2079178.html