惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Martin Fowler
Martin Fowler
V
Visual Studio Blog
有赞技术团队
有赞技术团队
T
Tailwind CSS Blog
B
Blog
I
InfoQ
博客园 - 三生石上(FineUI控件)
阮一峰的网络日志
阮一峰的网络日志
F
Fortinet All Blogs
H
Help Net Security
博客园 - Franky
宝玉的分享
宝玉的分享
博客园 - 司徒正美
C
Check Point Blog
G
Google Developers Blog
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Jina AI
Jina AI
T
The Blog of Author Tim Ferriss
MongoDB | Blog
MongoDB | Blog
云风的 BLOG
云风的 BLOG
A
About on SuperTechFans
罗磊的独立博客
大猫的无限游戏
大猫的无限游戏
IT之家
IT之家

一纸忘忧

ONE DAY 0402 糟糕的远程桌面连接体验 ONE DAY 0331 国产替代派上用场 ONE DAY 0328 火炉山公园和地摊椰子鸡 ONE DAY 0327 好久不见,最佳员工! ONE DAY 0326 差点从程序员变成了跨境运营 ONE DAY 0325 入职新公司一个月 ONE DAY 0322 带走了中山的所有东西 ONE DAY 0320 便宜的东西就是最贵的 ONE DAY 0319 该来的终究还是来了 ONE DAY 0318 过了本命年,命就是硬! ONE DAY 0317 AI 时代的工作流 ONE DAY 0316 梅开二度,Opus 再次离职 ONE DAY 0315 小镇上的图书馆 ONE DAY 0314 股市里的价投与韭菜 ONE DAY 0313 AI 离职,重金返聘! ONE DAY 0312 长江电力回本!历史盈利新高! ONE DAY 0311 工作中的优先级 ONE DAY 0310 重启 One Day 计划 ONE DAY 0310 重启 One Day 计划 成立一周年!开源的本土化中文文档知识库 - 一纸忘忧 成立一周年!开源的本土化中文文档知识库 也许世界并不美好,但也没有那么糟糕 - 一纸忘忧 也许世界并不美好,但也没有那么糟糕 如何在团队项目中白嫖 Vercel 的免费服务 - 一纸忘忧 如何在团队项目中白嫖 Vercel 的免费服务 梅开二度,土区 iCloud 再次涨价 - 一纸忘忧 梅开二度,土区 iCloud 再次涨价 解决 macOS 导入宝塔面板 SSL 证书失败 解决 macOS 导入宝塔面板 SSL 证书失败 阿里云高校计划免费领取五年 ECS 服务器 - 一纸忘忧
konva.js 阻止 click 事件冒泡到父元素 - 一纸忘忧
博主: 一纸忘忧 · 2023-03-29 · via 一纸忘忧

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 属性来实现相同的效果。

赞赏作者

如果觉得我的文章对你有用,请随意赞赏