---
title: "konva.js 阻止 click 點擊事件冒泡到父元素 - 一紙忘憂"
description: "在 KonvaJS 中，事件冒泡是預設啟用的，這意味著當在子元素上觸發事件時，該事件將向上傳播到父元素。因此，如果在圖層上註冊了 click 事件並在其上建立了一個群組，那麼單擊該群組也將觸發該事件。"
canonical_url: "https://www.ikxin.com/zh-tw/article/konva-click-bubbling"
last_updated: "2026-09-16T09:59:27.259Z"
locale: zh-tw
meta:
  "og:description": "在 KonvaJS 中，事件冒泡是預設啟用的，這意味著當在子元素上觸發事件時，該事件將向上傳播到父元素。因此，如果在圖層上註冊了 click 事件並在其上建立了一個群組，那麼單擊該群組也將觸發該事件。"
  "og:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~a29udmEuanMg6Zi75q2iIGNsaWNrIOm7nuaTiuS6i-S7tuWGkuazoeWIsOeItuWFg-e0oCAtIOS4gOe0meW~mOaGgg%2Cc_Article%2Ctitle_~a29udmEuanMg6Zi75q2iIGNsaWNrIOm7nuaTiuS6i-S7tuWGkuazoeWIsOeItuWFg-e0oA%2Cdescription_~5ZyoIEtvbnZhSlMg5Lit77yM5LqL5Lu25YaS5rOh5piv6aCQ6Kit5ZWf55So55qE77yM6YCZ5oSP5ZGz6JGX55W25Zyo5a2Q5YWD57Sg5LiK6Ke455m85LqL5Lu25pmC77yM6Kmy5LqL5Lu25bCH5ZCR5LiK5YKz5pKt5Yiw54i25YWD57Sg44CC5Zug5q2k77yM5aaC5p6c5Zyo5ZyW5bGk5LiK6Ki75YaK5LqGIGNsaWNrIOS6i-S7tuS4puWcqOWFtuS4iuW7uueri-S6huS4gOWAi-e-pOe1hO-8jOmCo-m6vOWWruaTiuipsue-pOe1hOS5n-Wwh-inuOeZvOipsuS6i-S7tuOAgg%2CsiteName_~5LiA57SZ5b-Y5oaC%2CsiteHost_www.ikxin.com%2Cp_Ii96aC10dy9hcnRpY2xlL2tvbnZhLWNsaWNrLWJ1YmJsaW5nIg%2Cs_vCk2wFSXm1uE-bNJ.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_~a29udmEuanMg6Zi75q2iIGNsaWNrIOm7nuaTiuS6i-S7tuWGkuazoeWIsOeItuWFg-e0oCAtIOS4gOe0meW~mOaGgg%2Cc_Article%2Ctitle_~a29udmEuanMg6Zi75q2iIGNsaWNrIOm7nuaTiuS6i-S7tuWGkuazoeWIsOeItuWFg-e0oA%2Cdescription_~5ZyoIEtvbnZhSlMg5Lit77yM5LqL5Lu25YaS5rOh5piv6aCQ6Kit5ZWf55So55qE77yM6YCZ5oSP5ZGz6JGX55W25Zyo5a2Q5YWD57Sg5LiK6Ke455m85LqL5Lu25pmC77yM6Kmy5LqL5Lu25bCH5ZCR5LiK5YKz5pKt5Yiw54i25YWD57Sg44CC5Zug5q2k77yM5aaC5p6c5Zyo5ZyW5bGk5LiK6Ki75YaK5LqGIGNsaWNrIOS6i-S7tuS4puWcqOWFtuS4iuW7uueri-S6huS4gOWAi-e-pOe1hO-8jOmCo-m6vOWWruaTiuipsue-pOe1hOS5n-Wwh-inuOeZvOipsuS6i-S7tuOAgg%2CsiteName_~5LiA57SZ5b-Y5oaC%2CsiteHost_www.ikxin.com%2Cp_Ii96aC10dy9hcnRpY2xlL2tvbnZhLWNsaWNrLWJ1YmJsaW5nIg%2Cs_vCk2wFSXm1uE-bNJ.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/zh-tw#website","@type":"WebSite","description":"一紙忘憂的個人網站，關於技術探索與日常生活，記錄 Web 開發、後端與 DevOps 實踐，分享軟體工具、數位體驗，以及程式碼之外的見聞與思考。","inLanguage":"zh-TW","name":"一紙忘憂","url":"https://www.ikxin.com/zh-tw","translationOfWork":{"@id":"https://www.ikxin.com/#website"}},{"@id":"https://www.ikxin.com/zh-tw/article/konva-click-bubbling#webpage","@type":"WebPage","description":"在 KonvaJS 中，事件冒泡是預設啟用的，這意味著當在子元素上觸發事件時，該事件將向上傳播到父元素。因此，如果在圖層上註冊了 click 事件並在其上建立了一個群組，那麼單擊該群組也將觸發該事件。","name":"konva.js 阻止 click 點擊事件冒泡到父元素","url":"https://www.ikxin.com/zh-tw/article/konva-click-bubbling","isPartOf":{"@id":"https://www.ikxin.com/zh-tw#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/zh-tw/article/konva-click-bubbling"]}]}]}
```

## Sitemap

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