title: Disable Listening Shapes Tip

You can set listening(false) to shape to remove it from hit graph. It means that shape will be invisible for hit detection (while visible on the canvas), so they never trigger any interactions with mouse or touch. Also such nodes will be ignored in container.getIntersection() and container.getAllIntersections() methods.

Setting listening(false) to nodes will increase performance.

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>
Enjoying Konva? Please consider to support the project.