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

推荐订阅源

雷峰网
雷峰网
爱范儿
爱范儿
宝玉的分享
宝玉的分享
Apple Machine Learning Research
Apple Machine Learning Research
博客园 - Franky
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
博客园 - 三生石上(FineUI控件)
人人都是产品经理
人人都是产品经理
阮一峰的网络日志
阮一峰的网络日志
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Last Week in AI
Last Week in AI
博客园 - 聂微东
大猫的无限游戏
大猫的无限游戏
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
罗磊的独立博客
博客园 - 叶小钗
WordPress大学
WordPress大学
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
酷 壳 – CoolShell
酷 壳 – CoolShell
小众软件
小众软件
博客园 - 司徒正美
博客园 - 【当耐特】
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 属性来实现相同的效果。

赞赏作者

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