konva.js 阻止 click 事件冒泡到父元素

前言

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