1

ここで私がやりたいことは非常に簡単です: ポインターがキャンバス要素内にあり、たとえばキー 'A' を押したときに、指定された場所を中心に円を描きたいとします。悲しいかな、私はこれを達成することができないようです。マウスクリックイベントをキャプチャするリスナーを追加する方法を知っています：

var canvas = goog.dom.getElement('my_canvas');
goog.events.listen(canvas, [goog.events.EventType.CLICK], 
   function(e) {console.log(e);});

簡単な es パイで、美しく機能します。イベントには、クリックした場所の座標が含まれているので、それを使用して円を描くことができます。しかし、これにはキーボードを使用したかったのです (他のアクションも計画しているため)。まず、簡単なことを試しました：

goog.events.listen(canvas, [goog.events.EventType.KEYDOWN], 
   function(e) {console.log(e);});

何もない。KEYUP、KEYPRESS、またはそれらすべてを一緒に使用してみましたが、ビープ音ではありませんでした。次に、 goog.events.KeyHandler に出会い、それを試しました。これが私がしたことです：

var canvas = goog.dom.getElement('my_canvas');
var keyHandler = new goog.events.KeyHandler(canvas);
goog.events.listen(keyHandler, goog.events.KeyHandler.EventType.KEY, 
   function(e) {console.log(e);});

まだ何もありません。さて、私は腹を立てたので、「キーボード イベントをキャプチャできるかどうか試してみましょう!」と言いました。そして、次のことを行いました：

var keyHandler = new goog.events.KeyHandler(document);
goog.events.listen(keyHandler, goog.events.KeyHandler.EventType.KEY, 
   function(e) {console.log(e);});

見よ、それはうまくいった：今、私はすべてのキーボードイベントをキャプチャしていた. 残念ながら、JavaScript コンソールでイベントを確認したところ、キーボード イベントには座標もターゲット要素も含まれていませんでした。何？つまり、あまり役に立ちませんよね？

とにかく、私は立ち往生しています。取るに足らないことのように思えましたが、私にはできないようです。

Mac OS X バージョン 10.7.4 で Chrome バージョン 19.0.1084.53 を使用しています。

Closure バージョンにバンドルされている Plovr を使用しているため、使用している Closure のバージョンについてはわかりませんが (2012 年 2 月)、かなり最近だと思います (2012 年 2 月)。

4

1 に答える 1

2

OK、コメントでcpeisertが指摘したように、問題はキャンバスがデフォルトで入力フォーカスを取得できないことでした。それを実現するには、「tabindex="1"」を追加する必要がありました。次に、キャンバスを div で囲み、イベント ハンドラーを div にアタッチする必要がありました。

関連する質問（クロージャーを使用していませんが）

于 2012-06-28T22:10:47.370 に答える