---
title: "konva.js の click クリックイベントが親要素にバブリングするのを防止する - 憂いを忘れる一枚"
description: "KonvaJS では、イベントバブリングがデフォルトで有効になっています。つまり、子要素でイベントが発生すると、そのイベントは親要素へ伝播します。そのため、レイヤーに click イベントを登録し、その上にグループを作成した場合、そのグループをクリックしても同じイベントが発生します。"
canonical_url: "https://www.ikxin.com/ja/article/konva-click-bubbling"
last_updated: "2026-09-16T09:59:27.259Z"
locale: ja
meta:
  "og:description": "KonvaJS では、イベントバブリングがデフォルトで有効になっています。つまり、子要素でイベントが発生すると、そのイベントは親要素へ伝播します。そのため、レイヤーに click イベントを登録し、その上にグループを作成した場合、そのグループをクリックしても同じイベントが発生します。"
  "og:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~a29udmEuanMg44GuIGNsaWNrIOOCr-ODquODg-OCr-OCpOODmeODs-ODiOOBjOimquimgee0oOOBq-ODkOODluODquODs-OCsOOBmeOCi-OBruOCkumYsuatouOBmeOCiyAtIOaGguOBhOOCkuW~mOOCjOOCi-S4gOaemg%2Cc_Article%2Ctitle_~a29udmEuanMg44GuIGNsaWNrIOOCr-ODquODg-OCr-OCpOODmeODs-ODiOOBjOimquimgee0oOOBq-ODkOODluODquODs-OCsOOBmeOCi-OBruOCkumYsuatouOBmeOCiw%2Cdescription_~S29udmFKUyDjgafjga~jgIHjgqTjg5njg7Pjg4jjg5Djg5bjg6rjg7PjgrDjgYzjg4fjg5Xjgqnjg6vjg4jjgafmnInlirnjgavjgarjgaPjgabjgYTjgb7jgZnjgILjgaTjgb7jgorjgIHlrZDopoHntKDjgafjgqTjg5njg7Pjg4jjgYznmbrnlJ~jgZnjgovjgajjgIHjgZ3jga7jgqTjg5njg7Pjg4jjga~opqropoHntKDjgbjkvJ3mkq3jgZfjgb7jgZnjgILjgZ3jga7jgZ~jgoHjgIHjg6zjgqTjg6Tjg7zjgasgY2xpY2sg44Kk44OZ44Oz44OI44KS55m76Yyy44GX44CB44Gd44Gu5LiK44Gr44Kw44Or44O844OX44KS5L2c5oiQ44GX44Gf5aC05ZCI44CB44Gd44Gu44Kw44Or44O844OX44KS44Kv44Oq44OD44Kv44GX44Gm44KC5ZCM44GY44Kk44OZ44Oz44OI44GM55m655Sf44GX44G-44GZ44CC%2CsiteName_~5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2CsiteHost_www.ikxin.com%2Cp_Ii9qYS9hcnRpY2xlL2tvbnZhLWNsaWNrLWJ1YmJsaW5nIg%2Cs_r9a4KK7DRvLM928z.png"
  "og:image:alt": "konva.js の click クリックイベントが親要素にバブリングするのを防止する - 憂いを忘れる一枚"
  "og:image:height": "630"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": "konva.js の click クリックイベントが親要素にバブリングするのを防止する"
  "twitter:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~a29udmEuanMg44GuIGNsaWNrIOOCr-ODquODg-OCr-OCpOODmeODs-ODiOOBjOimquimgee0oOOBq-ODkOODluODquODs-OCsOOBmeOCi-OBruOCkumYsuatouOBmeOCiyAtIOaGguOBhOOCkuW~mOOCjOOCi-S4gOaemg%2Cc_Article%2Ctitle_~a29udmEuanMg44GuIGNsaWNrIOOCr-ODquODg-OCr-OCpOODmeODs-ODiOOBjOimquimgee0oOOBq-ODkOODluODquODs-OCsOOBmeOCi-OBruOCkumYsuatouOBmeOCiw%2Cdescription_~S29udmFKUyDjgafjga~jgIHjgqTjg5njg7Pjg4jjg5Djg5bjg6rjg7PjgrDjgYzjg4fjg5Xjgqnjg6vjg4jjgafmnInlirnjgavjgarjgaPjgabjgYTjgb7jgZnjgILjgaTjgb7jgorjgIHlrZDopoHntKDjgafjgqTjg5njg7Pjg4jjgYznmbrnlJ~jgZnjgovjgajjgIHjgZ3jga7jgqTjg5njg7Pjg4jjga~opqropoHntKDjgbjkvJ3mkq3jgZfjgb7jgZnjgILjgZ3jga7jgZ~jgoHjgIHjg6zjgqTjg6Tjg7zjgasgY2xpY2sg44Kk44OZ44Oz44OI44KS55m76Yyy44GX44CB44Gd44Gu5LiK44Gr44Kw44Or44O844OX44KS5L2c5oiQ44GX44Gf5aC05ZCI44CB44Gd44Gu44Kw44Or44O844OX44KS44Kv44Oq44OD44Kv44GX44Gm44KC5ZCM44GY44Kk44OZ44Oz44OI44GM55m655Sf44GX44G-44GZ44CC%2CsiteName_~5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2CsiteHost_www.ikxin.com%2Cp_Ii9qYS9hcnRpY2xlL2tvbnZhLWNsaWNrLWJ1YmJsaW5nIg%2Cs_r9a4KK7DRvLM928z.png"
  "twitter:image:alt": "konva.js の click クリックイベントが親要素にバブリングするのを防止する - 憂いを忘れる一枚"
---

> Index of every page on this site: [llms.txt](https://www.ikxin.com/llms.txt)

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

2023.03.29 5,538  0

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

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

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

## 例

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

 JavaScript

```
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` プロパティを使用して同じ効果を実現します。

## **コメント**

(0)

まだコメントはありません

## **コメントを投稿**

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://www.ikxin.com/ja#website","@type":"WebSite","description":"「憂いを忘れる一枚」は、技術探究と日々の暮らしをテーマにした個人サイトです。Web 開発、バックエンド、DevOps の実践を記録し、ソフトウェアツールやデジタル体験、コードの外で得た見聞と思索を共有します。","inLanguage":"ja-JP","name":"憂いを忘れる一枚","url":"https://www.ikxin.com/ja","translationOfWork":{"@id":"https://www.ikxin.com/#website"}},{"@id":"https://www.ikxin.com/ja/article/konva-click-bubbling#webpage","@type":"WebPage","description":"KonvaJS では、イベントバブリングがデフォルトで有効になっています。つまり、子要素でイベントが発生すると、そのイベントは親要素へ伝播します。そのため、レイヤーに click イベントを登録し、その上にグループを作成した場合、そのグループをクリックしても同じイベントが発生します。","name":"konva.js の click クリックイベントが親要素にバブリングするのを防止する","url":"https://www.ikxin.com/ja/article/konva-click-bubbling","isPartOf":{"@id":"https://www.ikxin.com/ja#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/ja/article/konva-click-bubbling"]}]}]}
```

## Sitemap

See the full [sitemap](https://www.ikxin.com/sitemap.md) for all pages.