1

<canvas> API を使って簡単な Web ゲームを作ろうと考えています。キャンバスに直接レンダリングされる GUI 要素の JavaScript ライブラリを調べたところ、 Zebraのように見栄えの良いものがいくつか見つかりましたが、キャンバスの上にレンダリングされる標準の DOM コントロールに固執したいと思います。ただし、使用したいボタンやテキストボックスなどを含めるために使用している <div> によってマウス入力がトラップされるという問題が発生しています。

次の画像を検討するか、このフィドルに移動してこれまでのコードを確認してください。

スクリーンショット
（出典：ekardnt.com）

赤い背景はキャンバス要素で、青い背景は 4 つのボタンを持つ div です。canvas と div の両方に「position: absolute」CSS プロパティがあります。キャンバスと div の onclick イベントに単純な alert() 呼び出しを追加して、どの要素が入力をキャプチャしているかを表示しました。

私が欲しいのは、クリックがボタンに当たらなかったときはいつでも、キャンバスの onclick が呼び出されることです。つまり、ボタン コンテナ div の露出した青色の背景をクリックすると、クリック イベントがキャンバスに「フォール スルー」するようにします。ただし、現在のところ、div の onclick は、ボタンをクリックしたときと青い領域をクリックしたときの両方で呼び出されます。デフォルトの動作は適切ですが、私にとっては不便です。

私が望む動作を得る方法はありますか？div のスタイルに追加しようとしましpointer-events: noneたが、ボタンが入力にまったく反応しません。

4

1 に答える 1

5

コンテナーとボタン要素に追加pointer-events: none;します。次に、コンテナをクリックすると「フォールスルー」しますが、ボタンは機能したままです。#buttonspointer-events:auto;

http://jsfiddle.net/GD4Da/18/

#buttons {
    /* ... */
    pointer-events: none;
}
#buttons button {
    pointer-events: auto;
}
于 2013-10-18T20:55:44.473 に答える