Событие mouseclick JavaScript не работает в Firefox

Я сделал этот кусок кода для включения/отключения звука в игре, которую я делаю. Он отлично работает с Google Chrome и IE. Гордый, как я был, я дал код для моего друга, который пытался его на Firefox ..Событие mouseclick JavaScript не работает в Firefox

Но он сделал мне грустно, говоря, что не работает в Firefox ...

Я не знаю, почему это не работает, может кто-нибудь сказать мне, что случилось, или, может быть, что я должен изменить?

P.S .: «geluidknop» является голландским для «soundbutton».

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);

источник

2014-12-19 Siard Houtstra

Вы можете проверить, если событие щелчка достигает функции MouseClick на Firefox, прежде чем он делает canvas.getBoundingClientRect() вызов метода? Я думал, что это проблема с тегом Canvas, который является частью HTML5. Основываясь на caniuse.com, похоже, что Firefox полностью не поддерживает его: http://caniuse.com/#search=canvas. – jyrkim

Я думаю, что вы забыли передать event вашей функции обработчика событий. Chrome заполнит это, но Firefox не будет.

Оно должно быть:

function MouseClick(event) {}

источник

2014-12-19 12:32:21 Pavelloz

hahahahaha спасибо .. это был вопрос! –

Эта проблема может и не быть вашим кодом, но больше likley .mp3 поддержка в firefox. В зависимости от версии Firefox он использовал файл .mp3 может не поддерживаться

ЗАКАНЧИВАТЬ MOZILLA документы на audio support

источник

2014-12-19 12:05:42 atmd

Событие mouseclick JavaScript не работает в Firefox

ответ

Смежные вопросы