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