How to listen to an event on a canvas shape with Svelte and Konva?

With svelte-konva you can easily listen to user input events (click, dblclick, mouseover, tap, dbltap, touchstart, etc...) and drag&drop events (dragstart, dragmove, dragend). For this you can pass a callback function to the prop named on<Konva event name> which is then called by svelte-konva every time the event is fired. You can also access the Konva event payload object inside the callback function as its argument.

<script>
  import { Stage, Layer, Rect } from 'svelte-konva';

  function handleClick(e) {
    window.alert(`Clicked on rectangle: ${e.type}`);
  }
</script>

<Stage width={window.innerWidth} height={window.innerHeight}>
  <Layer>
    <Rect
      x={100}
      y={100}
      width={400}
      height={200}
      fill="blue"
      onpointerclick={handleClick}
    />
  </Layer>
</Stage>

For the full list of events take a look into on() method documentation.

Bubbling

Konva events bubble up by default. To prevent this you can set the cancelBubble property of the Konva event to true:

function handleClick(e) {
  // Cancel bubbling
  e.cancelBubble = true;
}

Bubbling​

Bubbling