Yes you can click-through a top layer to the bottom layer similar to pointer-events:none
You just tell your top layer not to listen to events…like this:
myTopLayer.setListening(false);
Now all mouse events will bubble down to the bottom layer.
Here’s code and a Fiddle: http://jsfiddle.net/m1erickson/WyW44/
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p>Green is on top layer</p>
<p>Blue is on bottom layer</p>
<p>You can click through the green rect to the blue rect</p>
<p>Works because green layer has "listening=false"</p>
<div id="container"></div>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.4.0-beta.js"></script>
<script>
var stage = new Kinetic.Stage({
container: 'container',
width: 400,
height: 200
});
var layerUnder = new Kinetic.Layer();
stage.add(layerUnder);
var layerOver = new Kinetic.Layer();
stage.add(layerOver);
var box1 = new Kinetic.Rect({
x: 75,
y: 30,
width: 100,
height:100,
fill: "blue",
stroke: 'black',
strokeWidth: 6,
draggable: true
});
layerUnder.add(box1);
layerUnder.draw();
var box2 = new Kinetic.Rect({
x: 100,
y: 50,
width: 100,
height:100,
fill: "green",
stroke: 'black',
strokeWidth: 6
});
layerOver.add(box2);
layerOver.draw();
// turn off mouse event listening for the top layer
// now you can click/drag the bottom layer even if the top rect obstructs
layerOver.setListening(false);
// listen for clicks on the bottom layer box
box1.on('click', function(evt){ alert("You clicked the bottom blue rectangle!"); });
</script>
</body>
</html>
