JavaScript for HTML canvas在Firefox中工作，但不在Chrome中

Question

所以我最近进入了画布并决定通过制作一个简单的游戏来玩弄它。

然而，它不能在Chrome浏览器中工作，但它在Firefox中工作。游戏应该是一个非常简单的RTS。您选择一个框，当您右键单击时，您可以将框从一个点移动到另一个点。

这适用于firefox。然而，在Chrome中，它绘制框但不注册任何点击（不能选择/移动框）。在Chrome中也没有任何东西出现在萤火虫控制台中。如果相关，我正在使用xampp的脚本。

编辑：哈，对不起。我真的不知道从哪里开始看，所以我只是把整个事情。我将上面的代码取下，并用下面的更简短的版本替换它。还编辑格式

EDIT2：下面的代码更

/*Game mouse controls*/ 
_screen.mousemove(function(e){ 
    var playerUnitHover = _game.onUnit(playerUnits, e), 
     enemyUnitHover = _game.onUnit(enemyUnits, e); 

     if(typeof(playerUnitHover)=='number') _screen.css('cursor','pointer'); 
     if(typeof(enemyUnitHover)=='number') _screen.css('cursor','not-allowed'); 
}); 

上述代码处理鼠标功能收窄。这是问题可能发生的地方。在firebug chrome中，我可以获取控制台中显示的变量，但当光标位于框上时，它无法注册。这是处理该功能的功能。

/*If mouse coordinates are ontop of unit, then return index of that unit from supplied array argument*/ 
this.onUnit = function(array,e){ 
var numOfUnits  = array.length, 
    mouseOffsetX = e.pageX - offsetX, 
    mouseOffsetY = e.pageY - offsetY; 

for(var i = 0; i < numOfUnits; i++){ 
    var unit = array[i], 
     xRange = mouseOffsetX > unit.x && (unit.x+unit.width) > mouseOffsetX, 
     yRange = mouseOffsetY > unit.y && (unit.y+unit.height) > mouseOffsetY; 

    if (xRange && yRange){ 
     return i; 
    } 

    if(!xRange || !yRange) _screen.css('cursor','crosshair'); 
} 
} 

Answer 1

的问题是，

mouseOffsetX = e.pageX - offsetX, 
mouseOffsetY = e.pageY - offsetY; 

是不够的，一致的跨浏览器的鼠标坐标。

可能有很多有效的方法来获取画布的鼠标坐标。我使用的防弹方式可能过于复杂，但它的工作在所有浏览器，并意识到的东西像CSS边框：

getMouse = function(e, canvas) { 
    var element = canvas, offsetX = 0, offsetY = 0; 
    if (element.offsetParent) { 
    do { 
     offsetX += element.offsetLeft; 
     offsetY += element.offsetTop; 
    } while ((element = element.offsetParent)); 
    } 

    // Add padding and border style widths to offset 
    offsetX += stylePaddingLeft; 
    offsetY += stylePaddingTop; 
    offsetX += styleBorderLeft; 
    offsetY += styleBorderTop; 

    // We return an javascript object with x and y defined 
    return { 
    x: e.pageX - offsetX, 
    y: e.pageY - offsetY 
    }; 
} 

的stylePadding和styleBorder可能是没有必要的，除非你有填充/边框。你可以在画布stylePadding这样的：

var stylePaddingLeft, stylePaddingTop, styleBorderLeft, styleBorderTop; 
    if (document.defaultView && document.defaultView.getComputedStyle) { 
    stylePaddingLeft = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingLeft'], 10)  || 0; 
    stylePaddingTop = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingTop'], 10)  || 0; 
    styleBorderLeft = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderLeftWidth'], 10) || 0; 
    styleBorderTop = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderTopWidth'], 10) || 0; 
    }