Javascript мышь не регистрируется в firefox

Question

Я создаю немного кода на данный момент, чтобы играть в карточную игру с верхним козырем в javascript и попал в ловушку, щелкнув по картам в Firefox. Мое кодовое слово прекрасно во всех других браузерах, но firefox просто не регистрирует клик на карточке, где я нажимаю.

Это немного мой код, чтобы показать, как я читаю щелчки мыши и как они используются. Надеюсь, это просто глупо я пропустил.

EDIT: Я, возможно, следовало бы отметить, что игра находится в пределах холста как часть HTML страницы

var mouseX = e.offsetX; 
var mouseY = e.offsetY; 

if(turn == 'Player') 
{ 
    if(mouseX >= 110 && mouseX <= 325) 
    { 
     if(mouseY >= 265 && mouseY <= 285) 
     { 
     playerChoice = 'ppi'; 
     } 
     if(mouseY >= 286 && mouseY <= 306) 
     { 
      playerChoice = 'hp'; 
     } 
     if(mouseY >= 307 && mouseY <= 327) 
     { 
      playerChoice = 'aa'; 
     } 
     if(mouseY >= 328 && mouseY <= 348) 
     { 
      playerChoice = 'ad'; 
     } 
     if(mouseY >= 349 && mouseY <= 369) 
     { 
      playerChoice = 's'; 
     } 
     if(mouseY >= 370 && mouseY <= 390) 
     { 
      playerChoice ='bs'; 
     } 
    } 
} 

Answer 1

Как сказал @Kevin, нет offsetX или offsetY использовать. В качестве альтернативы его предложению есть element.getBoundingClientRect(). Пример:

var rect = e.target.getBoundingClientRect();  
mouseY = e.clientY - rect.top; 
mouseX = e.clientX - rect.left; 

Source.

Answer 2

MouseEvent объект в Firefox не содержит offsetX и offsetY. Попробуйте использовать layerX и layerY. Это сделает совместимым скрипт-браузер.

var mouseX = (e.hasOwnProperty("offsetX") ? e.offsetX: e.layerX; 
var mouseY = (e.hasOwnProperty("offsetY") ? e.offsetY: e.layerY; 

JS Fiddle:http://jsfiddle.net/W4hgR/