konva.js 阻止 click 点击事件冒泡到父元素
内容提要
KonvaJS 事件默认冒泡，子元素点击会触发父元素事件。它没有 stopPropagation()，需在事件回调中设置 event.cancelBubble = true 阻止冒泡。示例中给组绑定 click 并设该属性，父级图层的 click 便不再触发。
延伸解读
KonvaJS 事件冒泡机制解析
KonvaJS 的事件冒泡默认启用，子元素事件会向上传播到父元素。与浏览器事件不同，KonvaJS 使用自己的事件系统，事件对象是 Konva.Collection 实例，包含所有相关节点。因此，在 KonvaJS 中阻止冒泡不能使用 stopPropagation()，而需设置 event.cancelBubble = true。理解这一机制有助于正确管理事件流。
阻止冒泡的正确方法
在 KonvaJS 中，阻止事件冒泡的唯一方式是在事件回调中设置 event.cancelBubble = true。例如，给组绑定 click 事件并设置该属性，父级图层的 click 事件便不会触发。注意，事件对象没有 stopPropagation() 方法，这是与浏览器事件系统的主要区别。
实际应用与注意事项
当需要在子元素点击时避免触发父元素事件，可使用 cancelBubble 属性。示例中，组和图层都绑定了 click 事件，通过设置 cancelBubble 可阻止事件传播。但需注意，KonvaJS 事件系统与浏览器不同，用法略有差异，开发者应熟悉其事件对象特性。
Q&A
KonvaJS 中如何阻止 click 事件冒泡到父元素？
在事件回调中设置 event.cancelBubble = true。例如：group.on('click', (event) => { event.cancelBubble = true; }); 这样父元素的 click 事件就不会触发。
KonvaJS 有 stopPropagation() 方法吗？
没有。KonvaJS 使用自己的事件系统，事件对象没有 stopPropagation() 方法，而是通过设置 cancelBubble 属性为 true 来阻止事件传播。
为什么在 KonvaJS 中点击子元素会触发父元素的事件？
因为 KonvaJS 默认启用事件冒泡，子元素上触发的事件会向上传播到父元素，所以父元素上注册的 click 事件也会被触发。
KonvaJS 的事件对象是什么？
事件对象是 Konva.Collection 类的实例，它是事件发生时所有相关节点的集合，可以用来访问事件目标节点和其他相关节点。
在 KonvaJS 中，如何让父元素的 click 事件不触发？
在子元素（如组）的 click 事件回调中设置 event.cancelBubble = true，这样事件就不会传播到父元素，父元素的 click 事件便不会触发。
KonvaJS 的事件系统和浏览器的事件系统有什么区别？
KonvaJS 使用自己的事件系统，事件对象没有 stopPropagation() 方法，而是使用 cancelBubble 属性来阻止事件传播，用法与浏览器略有不同。
