HTML5 Canvas Cancel Event Bubble Propagation with Konva

To cancel event bubble propagation with Konva, we can set the cancelBubble
property of the Event object to true.

Instructions: Click on the circle to observe that only the circle event binding
is handled because the event propagation was canceled when the circle event was triggered,
therefore preventing the event object from bubbling upwards.

Konva Cancel_Propagation Demoview raw

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Cancel Event Bubble Propagation Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>
    <script>
      var stage = new Konva.Stage({
        container: 'container',
        width: window.innerWidth,
        height: window.innerHeight,
      });

      var layer = new Konva.Layer();

      var group = new Konva.Group();

      var circle = new Konva.Circle({
        x: stage.width() / 2,
        y: stage.height() / 2,
        radius: 70,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4,
      });

      circle.on('click', function (evt) {
        alert('You clicked the circle!');
        evt.cancelBubble = true;
      });

      group.on('click', function () {
        alert('You clicked on the group!');
      });

      layer.on('click', function () {
        alert('You clicked on the layer!');
      });

      group.add(circle);
      layer.add(group);

      // add the layer to the stage
      stage.add(layer);
    </script>
  </body>
</html>

Enjoying Konva? Please consider to support the project.