konva.js 阻止 click 事件冒泡到父元素
内容提要
在KonvaJS中，事件冒泡默认启用，子元素的事件会传播到父元素。可以通过将事件对象的cancelBubble属性设置为true来阻止事件传播，从而防止父级元素的click事件触发。需要注意的是，KonvaJS的事件系统与浏览器有所不同。
延伸解读
KonvaJS 事件冒泡的默认行为
在 KonvaJS 中，事件冒泡是默认启用的，子元素上触发的事件会向上传播到父元素。例如，在图层上注册 click 事件并在其上创建组，单击组也会触发图层的 click 事件。这种机制与浏览器类似，但 KonvaJS 使用自己的事件系统来管理事件传递和监听器，因此开发者需要了解其独特之处。
阻止冒泡的正确方式：cancelBubble
KonvaJS 没有提供 stopPropagation() 方法，而是通过设置事件对象的 cancelBubble 属性为 true 来阻止事件继续传播。在事件处理函数中，将 event.cancelBubble 设为 true 即可防止父级元素的 click 事件触发。这是 KonvaJS 事件系统与浏览器事件系统的一个关键区别，开发者需注意使用正确的属性。
事件对象的特殊性
在 KonvaJS 中，事件对象是 Konva.Collection 类的实例，它包含了事件发生时所有相关节点的集合。开发者可以通过它访问事件目标节点和其他相关节点。由于事件对象没有 stopPropagation() 方法，因此不能沿用浏览器中的习惯用法，而应使用 cancelBubble 属性来控制事件传播。
Q&A
如何在KonvaJS中阻止事件冒泡到父元素？
可以通过将事件对象的cancelBubble属性设置为true来阻止事件传播，从而防止父级元素的click事件触发。
KonvaJS的事件系统与浏览器的事件系统有什么不同？
KonvaJS的事件系统没有stopPropagation()方法，而是使用cancelBubble属性来控制事件传播。
在KonvaJS中，事件对象是什么类型？
事件对象是Konva.Collection类的实例，包含事件发生时所有相关节点的集合。
如何在KonvaJS中处理组的click事件？
可以在组上注册click事件，并在事件处理函数中设置event.cancelBubble为true，以防止事件传播。
在KonvaJS中，如何创建一个图层并添加组？
可以通过创建Konva.Stage和Konva.Layer实例，然后将图层添加到舞台，再创建Konva.Group并添加到图层中。
使用KonvaJS时，如何确保父级元素的click事件不被触发？
在子元素的click事件处理函数中，将event.cancelBubble设置为true，以确保父级元素的click事件不被触发。
