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 屬性來實現相同的效果。