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;

Source

Javascript鼠标点击没有在Firefox中注册

2 个答案: