---
title: "konva.js click 클릭 이벤트가 부모 요소로 버블링되는 것을 방지하기 - 근심을 잊는 한 장"
description: "KonvaJS에서는 이벤트 버블링이 기본적으로 활성화되어 있습니다. 즉, 자식 요소에서 이벤트가 발생하면 해당 이벤트가 부모 요소로 전파됩니다. 따라서 레이어에 click 이벤트를 등록하고 그 위에 그룹을 생성한 경우, 해당 그룹을 클릭해도 이 이벤트가 발생합니다."
canonical_url: "https://www.ikxin.com/ko/article/konva-click-bubbling"
last_updated: "2026-09-16T09:59:27.259Z"
locale: ko
meta:
  "og:description": "KonvaJS에서는 이벤트 버블링이 기본적으로 활성화되어 있습니다. 즉, 자식 요소에서 이벤트가 발생하면 해당 이벤트가 부모 요소로 전파됩니다. 따라서 레이어에 click 이벤트를 등록하고 그 위에 그룹을 생성한 경우, 해당 그룹을 클릭해도 이 이벤트가 발생합니다."
  "og:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~a29udmEuanMgY2xpY2sg7YG066atIOydtOuypO2KuOqwgCDrtoDrqqgg7JqU7IaM66GcIOuyhOu4lOungeuQmOuKlCDqsoPsnYQg67Cp7KeA7ZWY6riwIC0g6re87Ius7J2EIOyeiuuKlCDtlZwg7J6l%2Cc_Article%2Ctitle_~a29udmEuanMgY2xpY2sg7YG066atIOydtOuypO2KuOqwgCDrtoDrqqgg7JqU7IaM66GcIOuyhOu4lOungeuQmOuKlCDqsoPsnYQg67Cp7KeA7ZWY6riw%2Cdescription_~S29udmFKU-yXkOyEnOuKlCDsnbTrsqTtirgg67KE67iU66eB7J20IOq4sOuzuOyggeycvOuhnCDtmZzshLHtmZTrkJjslrQg7J6I7Iq164uI64ukLiDspoksIOyekOyLnSDsmpTshozsl5DshJwg7J2067Kk7Yq46rCAIOuwnOyDne2VmOuptCDtlbTri7kg7J2067Kk7Yq46rCAIOu2gOuqqCDsmpTshozroZwg7KCE7YyM65Cp64uI64ukLiDrlLDrnbzshJwg66CI7J207Ja07JeQIGNsaWNrIOydtOuypO2KuOulvCDrk7HroZ3tlZjqs6Ag6re4IOychOyXkCDqt7jro7nsnYQg7IOd7ISx7ZWcIOqyveyasCwg7ZW064u5IOq3uOujueydhCDtgbTrpq3tlbTrj4Qg7J20IOydtOuypO2KuOqwgCDrsJzsg53tlanri4jri6Qu%2CsiteName_~6re87Ius7J2EIOyeiuuKlCDtlZwg7J6l%2CsiteHost_www.ikxin.com%2Cp_Ii9rby9hcnRpY2xlL2tvbnZhLWNsaWNrLWJ1YmJsaW5nIg%2Cs_26SqDyVnCA1GJ_SL.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_~a29udmEuanMgY2xpY2sg7YG066atIOydtOuypO2KuOqwgCDrtoDrqqgg7JqU7IaM66GcIOuyhOu4lOungeuQmOuKlCDqsoPsnYQg67Cp7KeA7ZWY6riwIC0g6re87Ius7J2EIOyeiuuKlCDtlZwg7J6l%2Cc_Article%2Ctitle_~a29udmEuanMgY2xpY2sg7YG066atIOydtOuypO2KuOqwgCDrtoDrqqgg7JqU7IaM66GcIOuyhOu4lOungeuQmOuKlCDqsoPsnYQg67Cp7KeA7ZWY6riw%2Cdescription_~S29udmFKU-yXkOyEnOuKlCDsnbTrsqTtirgg67KE67iU66eB7J20IOq4sOuzuOyggeycvOuhnCDtmZzshLHtmZTrkJjslrQg7J6I7Iq164uI64ukLiDspoksIOyekOyLnSDsmpTshozsl5DshJwg7J2067Kk7Yq46rCAIOuwnOyDne2VmOuptCDtlbTri7kg7J2067Kk7Yq46rCAIOu2gOuqqCDsmpTshozroZwg7KCE7YyM65Cp64uI64ukLiDrlLDrnbzshJwg66CI7J207Ja07JeQIGNsaWNrIOydtOuypO2KuOulvCDrk7HroZ3tlZjqs6Ag6re4IOychOyXkCDqt7jro7nsnYQg7IOd7ISx7ZWcIOqyveyasCwg7ZW064u5IOq3uOujueydhCDtgbTrpq3tlbTrj4Qg7J20IOydtOuypO2KuOqwgCDrsJzsg53tlanri4jri6Qu%2CsiteName_~6re87Ius7J2EIOyeiuuKlCDtlZwg7J6l%2CsiteHost_www.ikxin.com%2Cp_Ii9rby9hcnRpY2xlL2tvbnZhLWNsaWNrLWJ1YmJsaW5nIg%2Cs_26SqDyVnCA1GJ_SL.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,539  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/ko#website","@type":"WebSite","description":"근심을 잊는 한 장은 기술 탐구와 일상을 다루는 개인 웹사이트입니다. 웹 개발, 백엔드 및 DevOps 실무를 기록하고 소프트웨어 도구와 디지털 경험, 코드 밖의 견문과 생각을 나눕니다.","inLanguage":"ko-KR","name":"근심을 잊는 한 장","url":"https://www.ikxin.com/ko","translationOfWork":{"@id":"https://www.ikxin.com/#website"}},{"@id":"https://www.ikxin.com/ko/article/konva-click-bubbling#webpage","@type":"WebPage","description":"KonvaJS에서는 이벤트 버블링이 기본적으로 활성화되어 있습니다. 즉, 자식 요소에서 이벤트가 발생하면 해당 이벤트가 부모 요소로 전파됩니다. 따라서 레이어에 click 이벤트를 등록하고 그 위에 그룹을 생성한 경우, 해당 그룹을 클릭해도 이 이벤트가 발생합니다.","name":"konva.js click 클릭 이벤트가 부모 요소로 버블링되는 것을 방지하기","url":"https://www.ikxin.com/ko/article/konva-click-bubbling","isPartOf":{"@id":"https://www.ikxin.com/ko#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/ko/article/konva-click-bubbling"]}]}]}
```

## Sitemap

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