---
title: "konva.js 阻止 click 点击事件冒泡到父元素 - 一纸忘忧"
description: "在 KonvaJS 中，事件冒泡是默认启用的，这意味着当在子元素上触发事件时，该事件将向上传播到父元素。因此，如果在图层上注册了 click 事件并在其上创建了一个组，那么单击该组也将触发该事件。"
canonical_url: "https://www.ikxin.com/article/konva-click-bubbling"
last_updated: "2026-09-16T09:59:27.259Z"
locale: zh-cn
meta:
  "og:description": "在 KonvaJS 中，事件冒泡是默认启用的，这意味着当在子元素上触发事件时，该事件将向上传播到父元素。因此，如果在图层上注册了 click 事件并在其上创建了一个组，那么单击该组也将触发该事件。"
  "og:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~a29udmEuanMg6Zi75q2iIGNsaWNrIOeCueWHu-S6i-S7tuWGkuazoeWIsOeItuWFg-e0oCAtIOS4gOe6uOW~mOW~pw%2Cc_Article%2Ctitle_~a29udmEuanMg6Zi75q2iIGNsaWNrIOeCueWHu-S6i-S7tuWGkuazoeWIsOeItuWFg-e0oA%2Cdescription_~5ZyoIEtvbnZhSlMg5Lit77yM5LqL5Lu25YaS5rOh5piv6buY6K6k5ZCv55So55qE77yM6L-Z5oSP5ZGz552A5b2T5Zyo5a2Q5YWD57Sg5LiK6Kem5Y-R5LqL5Lu25pe277yM6K-l5LqL5Lu25bCG5ZCR5LiK5Lyg5pKt5Yiw54i25YWD57Sg44CC5Zug5q2k77yM5aaC5p6c5Zyo5Zu-5bGC5LiK5rOo5YaM5LqGIGNsaWNrIOS6i-S7tuW5tuWcqOWFtuS4iuWIm-W7uuS6huS4gOS4que7hO-8jOmCo-S5iOWNleWHu-ivpee7hOS5n-WwhuinpuWPkeivpeS6i-S7tuOAgg%2CsiteName_~5LiA57q45b-Y5b-n%2CsiteHost_www.ikxin.com%2Cp_Ii9hcnRpY2xlL2tvbnZhLWNsaWNrLWJ1YmJsaW5nIg%2Cs_x5y2RKVZkWOIVSX1.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_~a29udmEuanMg6Zi75q2iIGNsaWNrIOeCueWHu-S6i-S7tuWGkuazoeWIsOeItuWFg-e0oCAtIOS4gOe6uOW~mOW~pw%2Cc_Article%2Ctitle_~a29udmEuanMg6Zi75q2iIGNsaWNrIOeCueWHu-S6i-S7tuWGkuazoeWIsOeItuWFg-e0oA%2Cdescription_~5ZyoIEtvbnZhSlMg5Lit77yM5LqL5Lu25YaS5rOh5piv6buY6K6k5ZCv55So55qE77yM6L-Z5oSP5ZGz552A5b2T5Zyo5a2Q5YWD57Sg5LiK6Kem5Y-R5LqL5Lu25pe277yM6K-l5LqL5Lu25bCG5ZCR5LiK5Lyg5pKt5Yiw54i25YWD57Sg44CC5Zug5q2k77yM5aaC5p6c5Zyo5Zu-5bGC5LiK5rOo5YaM5LqGIGNsaWNrIOS6i-S7tuW5tuWcqOWFtuS4iuWIm-W7uuS6huS4gOS4que7hO-8jOmCo-S5iOWNleWHu-ivpee7hOS5n-WwhuinpuWPkeivpeS6i-S7tuOAgg%2CsiteName_~5LiA57q45b-Y5b-n%2CsiteHost_www.ikxin.com%2Cp_Ii9hcnRpY2xlL2tvbnZhLWNsaWNrLWJ1YmJsaW5nIg%2Cs_x5y2RKVZkWOIVSX1.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,530  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/#website","@type":"WebSite","description":"一纸忘忧的个人网站，关于技术探索与日常生活，记录 Web 开发、服务端与 DevOps 实践，分享软件工具、数码体验，以及代码之外的见闻与思考。","inLanguage":"zh-CN","name":"一纸忘忧","url":"https://www.ikxin.com/","workTranslation":[{"@id":"https://www.ikxin.com/zh-tw#website"},{"@id":"https://www.ikxin.com/ko#website"},{"@id":"https://www.ikxin.com/en#website"},{"@id":"https://www.ikxin.com/ja#website"}]},{"@id":"https://www.ikxin.com/article/konva-click-bubbling#webpage","@type":"WebPage","description":"在 KonvaJS 中，事件冒泡是默认启用的，这意味着当在子元素上触发事件时，该事件将向上传播到父元素。因此，如果在图层上注册了 click 事件并在其上创建了一个组，那么单击该组也将触发该事件。","name":"konva.js 阻止 click 点击事件冒泡到父元素","url":"https://www.ikxin.com/article/konva-click-bubbling","isPartOf":{"@id":"https://www.ikxin.com/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/article/konva-click-bubbling"]}]}]}
```

## Sitemap

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