2つのキャンバスを重ねて重ねる+クリックイベント

Question

2つのキャンバスの要素を重ね合わせたいとします。 ゲームのために使用されます。下のキャンバスにはhexgridが表示され、上のキャンバスには問題/注文が表示されます（基本的に矢印または16進数のハイライト - 大規模なhexgridを数百回再描画しません）。プレーヤー。

キャンバスはzIndex 1/2でレイヤー化されています。

ただし、問題は次のとおりです。トップキャンバスに表示されるオーダーは、「キャンバス」の「クリック」イベントと「mousemove」イベントに応じて描画されると想定されます。 "hexgrid"キャンバスの上に "orders"キャンバスを重ねることで、それ以上イベントを受け取っていないため、mousemoveとclickイベントはもう "hexgrid"キャンバスによってトリガーされません。

イベントを「転送」する、つまりある要素から別の要素にイベントを伝播する方法、または私の問題を解決するもう一つのスマートな方法はありますか？

Answer 1

例えば、document.getElementById（ 'otherCanvas'）のような他のキャンバスのイベントをトリガーすることができますか？click（）？

Answer 2

キャンバスのルート要素でイベントを聴く必要がありますか？イベントの後、あなたは両方のデータを収集して処理しますか？

<div onclick="..."> 
    <canvas> 
    <canvas> 
</div> 

このような状況では、キャンバスはルートのすべてのスペースを取り、div内の座標はキャンバスで同じです。

Answer 3

イベントを次のキャンバスに伝播します。キャンバスが重なると、座標は同じになります。覆われたキャンバス内に定義されたオブジェクトのトリガーを作成することができます。

var Game = {canvas1: undefined, canvas2: undefined}; 
 

 
Game.canvas1 = document.getElementById('canvas1'); 
 
Game.canvas1.addEventListener('click', on_canvas_click1, false); 
 

 
Game.canvas2 = document.getElementById('canvas2'); 
 
Game.canvas2.addEventListener('click', on_canvas_click2, false); 
 

 
function on_canvas_click1(ev) { 
 
    //do your stuff 
 
    on_canvas_click2(ev); 
 
} 
 

 
function on_canvas_click2(ev) { 
 
    
 
\t var mousePos = getMousePos(Game.canvas2, ev); 
 
    
 
     var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y + " target: " + mousePos.target + " Id: " + mousePos.target.getAttribute("id");; 
 
     writeMessage(Game.canvas2, message); 
 
} 
 

 

 
function writeMessage(canvas, message) { 
 
     var context = canvas.getContext('2d'); 
 
     context.clearRect(0, 0, canvas.width, canvas.height); 
 
     context.font = '8pt Calibri'; 
 
     context.fillStyle = 'black'; 
 
     context.fillText(message, 10, 25); 
 
     } 
 
function getMousePos(canvas, evt) { 
 
     var rect = canvas.getBoundingClientRect(); 
 
     return { 
 
      x: evt.clientX - rect.left, 
 
      y: evt.clientY - rect.top, 
 
      target: evt.target 
 
     }; 
 
     }

<canvas id="canvas1" width="400" height="400" style="border: 1px solid black"></canvas> 
 

 
<canvas id="canvas2" width="400" height="400" style="border: 1px solid black"></canvas>