html5 canvasでマウスイベントが発生していない

Question

html5 canvas要素のイベントを登録する特別な方法があるかどうか知りたいですか？

次のコードは、私のcanvas要素上の任意のマウスイベントは発生しません：私は、キャンバス上でクリックしたときに

function MyObject() { 
    this.init(); 
}; 

MyObject.prototype.init = function() { 
    var canvas = document.getElementById('myCanvas'); 
    var ctx = canvas.getContext('2d'); 
    var anImage = new Image('image1.png'); 

    ctx.drawImage(anImage, 0, 0, 100, 100, 0, 0, 100, 100); 

    canvas.onmousedown = createDelegate(this, this.mouseDownEvent); 
} 

MyObject.prototype.mouseDownEvent = function(e) { 
    //Not even reaching this point. 
} 

var obj = new MyObject(); 

mouseDownEvent関数が呼び出されさえなっていません。誰も私にコードで何が間違っているか教えてもらえますか？

N.B.イメージタグのキャンバスをスワップアウトすると問題が解決します。 [OK]を

Answer 1

は、私が...これは奇妙ですが、canvas要素に

-webkit-transform: translate3d(0, 0, 0) 

スタイリングを追加することによって、問題を修正しているようだ奇妙な知っています。

Answer 2

これは少し遅れていますが、私はまったく同じような経験をしています。私はここにそれを詳述した：Putting HTML5 <canvas> inside <table> nullifies mouse events。マウスイベントがまだトリガされていたことが判明しましたが、私の計算された座標はすべて間違ったオフセットを基準にして計算されていました。

これはおそらくあなたを助けるには遅すぎるかもしれませんが、あなたの知的好奇心を満足させるでしょうか？