标签：firefox event-handling html5-canvas javascript-events javascript

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

基本上,每次单击鼠标时,我都会在下面调用该函数,它在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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。