HTML5 Canvas Special Stage Events Konva

All events are starts from Shapes. So if you click on empty space on canvas click event will no trigger on Layer BUT it will trigger on Stage object.

In some cases you may want to listen special “content” events. This events will be triggered for Stage container interactions (like mouse or touch events).

Supported content events:
contentMouseover, contentMousemove, contentMouseout, contentMousedown, contentMouseup, contentClick, contentDblclick, contentTouchstart, contentTouchmove, contentTouchend, contentTap, contentDblTap

Konva Stage Events Demoview raw
<!DOCTYPE html>
<html>

<head>
<script src="https://cdn.rawgit.com/konvajs/konva/2.1.3/konva.min.js"></script>
<meta charset="utf-8">
<title>Konva Stage Events 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();
// add the layer to the stage
stage.add(layer);

var circle = new Konva.Circle({
x: stage.width() / 2,
y: stage.height() / 2,
fill: 'blue',
radius: 30
});

layer.add(circle).draw();

stage.on('click', function (e) {
// e.target is a clicked Konva.Shape
// if you clicked on empty space e.target = stage
console.log('clicked on', e.target);
console.log('usual click on ' + JSON.stringify(stage.getPointerPosition()));
});

stage.on('contentClick', function (e) {
// content event has no information about e.target.
// so it is undefined
console.log('content click on ' + JSON.stringify(stage.getPointerPosition()));
});
</script>

</body>

</html>