HTML5 Canvas Cancel Event Bubble Propagation with KineticJS

To cancel event bubble propagation with KineticJS, 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.

Open in new window

Code Editor

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.5.2-beta.js"></script>
    <script defer="defer">
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });

var layer = new Kinetic.Layer();
      var group = new Kinetic.Group();

var circle = new Kinetic.Circle({
        x: stage.getWidth() / 2,
        y: stage.getHeight() / 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);
      stage.add(layer);
    </script>
  </body>
</html>

< Listen for Events Event Delegation >

More Examples

Modified on April 9th, 2013 by Eric Rowell