Disable Listening Shapes Tip

You can set listening(false) to shape to remove it from hit graph. It will increase performance.
In some cases it may be very useful and will not touch whole logic of your application.

For example we have a button (group) with rectangle and text. We need to listen click on button.
It this case we can remove text from hit graph and listen click only from rectangle.

Konva Disable Listening Shapes Demoview raw

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Listening False Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;

      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height
      });
      var layer = new Konva.Layer();

      var button = new Konva.Group({
        x: stage.width() / 2,
        y: stage.height() / 2
      });

      var offset = 10;
      var text = new Konva.Text({
        x: offset,
        y: offset,
        text: 'press me!',
        // as we don't really need text on hit graph we can set:
        listening: false
      });
      var rect = new Konva.Rect({
        width: text.width() + offset * 2,
        height: text.height() + offset * 2,
        fill: 'grey',
        shadowColor: 'black'
      });
      button.add(rect, text);

      button.on('click tap', function() {
        alert('button clicked');
      });

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