KonvaJS에서는 이벤트 버블링이 기본적으로 활성화되어 있습니다. 즉, 자식 요소에서 이벤트가 발생하면 해당 이벤트가 부모 요소로 전파됩니다. 따라서 레이어에 click 이벤트를 등록하고 그 위에 그룹을 생성한 경우, 해당 그룹을 클릭해도 이 이벤트가 트리거됩니다.

KonvaJS에는 이벤트 버블링을 방지하기 위한 stopPropagation() 메서드가 없습니다. 대신 KonvaJS는 이벤트, 이벤트 전달 및 이벤트 리스너를 관리하기 위해 자체 이벤트 시스템을 사용합니다.

KonvaJS에서는 이벤트 객체의 stopPropagation() 메서드를 사용하여 이벤트가 상위 요소로 전파되는 것을 막을 수 있습니다. KonvaJS에서 이벤트 객체는 Konva.Collection 클래스의 인스턴스로, 이벤트가 발생했을 때 모든 관련 노드의 컬렉션입니다. 이를 사용하여 이벤트 대상 노드와 기타 관련 노드에 액세스할 수 있습니다.

예제

다음 코드는 부모 요소의 click 이벤트가 트리거되는 것을 방지하기 위해 KonvaJS 이벤트 시스템을 사용하는 방법을 보여 줍니다.

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 속성을 사용하여 동일한 효과를 구현합니다.