HTMLキャンバスのjavascriptはfirefoxでは動作しますがchromeでは動作しません

Question

ちょうどキャンバスに入って、単純なゲームを作って遊んでいます。

しかし、クロームでは機能しませんが、Firefoxでは機能します。ゲームは非常に単純なRTSであるはずです。ボックスを選択し、右クリックするとボックスをあるポイントから別のポイントに移動できます。

これはfirefoxで動作します。ただし、クロムではボックスを描画しますが、クリックは登録されません（ボックスを選択/移動できません）。クロームでも、火かき棒のコンソールに何も表示されません。私はxamppからスクリプトを実行していますが、それが適切な場合に備えています。

EDIT：ha、申し訳ありません。私は正直なところ、どこから探し始めたらいいのかわからなかったので、全部を投稿しました。私は上記のコードをダウンし、それよりもはるかに短いバージョンに置き換えました。上記のコードは、マウスの機能を処理するコードの下に絞り込ん一層

/*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'); 
}); 

：また

EDIT2をフォーマット編集。これはおそらく問題が発生する場所です。ファイヤーバグのクロムでは、コンソールに表示する変数を取得できますが、カーソルがボックスの上にあるときは登録に失敗します。これを処理する関数は以下のとおりです。

/*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; 

が一貫したクロスブラウザマウス座標のために十分ではないということです。

おそらくキャンバスのマウス座標を取得する有効な方法はたくさんあります。私が使用防弾方法がovercomplicatedされるかもしれないが、それはすべてのブラウザで作業を行い、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はおそらく必要ありません。

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