javascript - mouseclick 事件 JavaScript 在 Firefox 中不起作用

Question

我编写了这段代码，用于在我正在制作的游戏中打开/关闭声音。 它与 Google Chrome 和 IE 配合得很好。尽管我很自豪，但我还是把代码给了我在 Firefox 上尝试过的 friend 。

但是他说它在 Firefox 上不起作用，这让我很伤心......

我不知道为什么它不起作用，有人可以告诉我出了什么问题或者我必须改变什么吗？

附注:“geluidknop”是荷兰语“声音按钮”的意思。

var audio = new Audio('Beep.mp3'); 

function playAudio() {
audio.play();

}

function pauseAudio() {
audio.pause();
audio.currentTime = 0;
} 


window.addEventListener('keydown', playAudio);
audio.play();

function CanvasApp() { 
'use strict'
var canvas = document.getElementById("canvas"),
    style = window.getComputedStyle(canvas),
    context = canvas.getContext("2d"),
    source1 = "geluidaan.png",
    source2 = "geluiduit.png",
    click = false,
    geluidknop = {x: 0, y: 0, width: 1024, height: 768};

geluidknop.aspect = geluidknop.height / geluidknop.width;
geluidknop.width = 500;
geluidknop.height = geluidknop.width * geluidknop.aspect;

canvas.width = parseInt(style.width, 10);
canvas.height = parseInt(style.height, 10);

var img = new Image();

img.onload = function () {
context.drawImage (img, geluidknop.x, geluidknop.y, geluidknop.width, geluidknop.height);
};

img.src = source1;

function changeImage() {
    if (click) {
        img.src = source2;
    } else {
        img.src = source1;
    } 
}

function MouseClick() {
    var rect = canvas.getBoundingClientRect(),
        x = event.clientX - rect.left,
        y = event.clientY - rect.top;

    if (x >= geluidknop.x && x <= geluidknop.x + geluidknop.width) {
        if (y >= geluidknop.y && y <= geluidknop.y + geluidknop.height) {
            if  (click) {
                click = false;
                playAudio();
                changeImage();
            }else { 
            click = true;
            pauseAudio();
            changeImage();
    }
        }   
    }
    context.save();
    context.setTransform(1, 0, 0, 1, 0, 0);
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.restore();
}



canvas.addEventListener('click', MouseClick); 

function restartAudio() { 
audio.currentTime = 0;
audio.play();
}
audio.addEventListener('ended', restartAudio);
}

function WindowLoaded() {
'use strict';
CanvasApp();
}

window.addEventListener("load", WindowLoaded);

Answer 1

我认为您忘记将 event 传递给事件处理函数。 Chrome 会填写此内容，但 Firefox 不会。

应该是:

function MouseClick(event) {}