1. ホーム
  2. 質問と答え
  3. HTML5を埋め込む<canvas>の内部に<table>はマウスイベントを無効にします

HTML5を埋め込む<canvas>の内部に<table>はマウスイベントを無効にします

2017-03-20 5 views
1

マウスイベントに応答できるように、私はaddEventListener()メソッドを複数回使用するHTML5キャンバスオブジェクトを持っています。私が使用して行は次のようになります。HTML5を埋め込む<canvas>の内部に<table>はマウスイベントを無効にします

canvas.addEventListener("mousemove", this.checkMouseLocation.bind(this, this.inputs), false);

このすべては限りキャンバスは、文書の体内、またはdiv要素に直接あるように、完璧に動作します。ただし、テーブル内では機能しません。キャンバスが配置されると、すべてのマウスイベントが発射を停止するように見えます。

Mouse event not being triggered on html5 canvasを読んだ後、その解決策を試してみることにしました。プロパティーをstyle="-webkit-transform: translate3d(0, 0, 0);"に追加することをキャンバスに追加しました。これでFirefoxの問題は解決しましたが、Chromeではまだマウスに注意を払うことを拒否しています。

誰にもアイデアはありますか？私はあなたにどのように伝えることができませんでしたが、最高の推測は、これはマウス座標と関係があるということです。

ありがとうございました。

出典

2017-03-20 Adam Smith

+1

好奇心の抱か：なぜ、

の中に ''要素がありますか？ table要素は表形式のデータを表現するために使用されます。キャンバス要素が表形式のデータとして数えられる状況はあまりないと思います。 –

+0

アニメーションにキャンバスが使用されています - この場合、ロジックゲート（and、orなど）。複数のものがあるので、それらをすべて並べて表示したかったのです。 –

答えて

1

私は私の後に来る人のために答えを見つけました。

マウスのメッセージは完全に不一致ではありませんでしたが、まだ起こっていました。しかし、マウスのx座標とy座標は完全にオフになっていて、マウスのx座標とy座標は応答していませんでした。

私はこのように、マウスの位置からのオフセットキャンバスのを差し引いて私のマウスの座標を計算していた：canvasオブジェクトのオフセットがに関しては、常にではないので

var x = event.pageX - canvas.offsetLeft; 
var y = event.pageY - canvas.offsetTop;

は残念ながら、これは、信頼性ではありません文書本体に転送する。テーブルの中にあるとき、彼らは<td>に関連し、canvasは内部にあります。そのため、座標が途切れて、canvasオブジェクトがマウスに完全に反応しないように見えます。

私はこれらとこれらの行を置き換える：

var rect = canvas.getBoundingClientRect(); 
var x = event.clientX - rect.left; 
var y = event.clientY - rect.top;

神のみgetBoundingClientRect()機能がどのように効率的に知っているので、これは、少しkludgeyようで、それが浮動小数点ではなく座標で私が扱ってることを意味整数座標よりもしかし、私が計算したxとyは正確であり、それはもっと重要です。

これは他の誰かが道を救うのに役立ちます。

出典

2017-03-21 01:09:18

+0

パフォーマンスが良いとすれば、gBCRは '.offsetLeft'と' .offsetTop'と全く同じでなければなりません。固定されたプロパティのように見えても、gBCRと同じ方法で実際に再計算されます。 （もちろん、DOMRectを作成しているので最小限の違いがあるかもしれませんが、ループで10万回も呼び出さなければ心配することはありません。 – Kaiido

+0

ありがとう@Kaiido。 JavaScriptプログラムが効率的かどうかを判断する方法に関する情報基本的なプログラミングの慣行（例えば複雑さの分析）を除いて、これはいつも私を逃してしまった。 –

関連する問題

 関連する問題