Javascript鼠標單擊未在firefox中注冊

Question

目前，我正在創建一些代碼，以使用javascript玩王牌風格的紙牌游戲，並在Firefox中單擊卡而遇到麻煩。 我的代碼字在所有其他瀏覽器中都可以，但是firefox只是沒有在我點擊的卡上注冊點擊。

這是我的代碼的一部分，以顯示如何讀取鼠標單擊以及如何使用它們。 希望這只是我錯過的傻事。

編輯：我也許應該提到游戲是作為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

Firefox中的MouseEvent對象不包含offsetX和offsetY 。 嘗試使用layerX和layerY 。 這將使腳本跨瀏覽器兼容。

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

JS小提琴： http ： //jsfiddle.net/W4hgR/

Answer 2

正如@Kevin所說，沒有可使用的offsetX或offsetY 。 除了他的建議之外，還有element.getBoundingClientRect() 。 例：

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

來源 。