konva.js の click クリックイベントが親要素にバブリングするのを防止する

KonvaJS では、イベントバブリングがデフォルトで有効になっています。つまり、子要素でイベントが発生すると、そのイベントは親要素へ伝播します。そのため、レイヤーに click イベントを登録し、その上にグループを作成した場合、そのグループをクリックしても同じイベントが発生します。

KonvaJS には、イベントのバブリングを防止する stopPropagation() メソッドはありません。その代わり、KonvaJS は独自のイベントシステムを使用して、イベント、イベントの伝達、イベントリスナーを管理しています。

KonvaJS では、イベントオブジェクトの stopPropagation() メソッドを使用して、イベントが上位の要素へ伝播するのを防ぐことができます。KonvaJS において、イベントオブジェクトは Konva.Collection クラスのインスタンスであり、イベント発生時に関連するすべてのノードのコレクションです。これを使用して、イベントの対象ノードやその他の関連ノードにアクセスできます。

例

以下のコードは、KonvaJS のイベントシステムを使用して、親要素の click イベントが発生するのを防ぐ方法を示しています。

const stage = new Konva.Stage({
  container: 'container',
  width: 500,
  height: 500,
});

const layer = new Konva.Layer();
stage.add(layer);

const group = new Konva.Group();
group.on('click', (event) => {
  // 阻止事件传播到父级元素
  event.cancelBubble = true;
  
  // 处理组的 click 事件
  // ...
});

layer.on('click', (event) => {
  // 在此处理父级元素的 click 事件
  // ...
});

この例では、グループをクリックすると、イベントオブジェクトの cancelBubble プロパティが true に設定され、イベントが親要素へ伝播し続けるのを防ぎます。これにより、親要素の click イベントは発生しなくなります。

KonvaJS のイベントシステムはブラウザーのイベントシステムとは異なるため、その使い方も少し異なることに注意してください。具体的には、イベントオブジェクトには stopPropagation() メソッドがなく、代わりに cancelBubble プロパティを使用して同じ効果を実現します。