How to allow mouse events to fall through KineticJS stage?

Question

I have a PanoJS3 component taking the whole screen and a KineticJS stage over that. How can I make the touch events fall through KineticJS stage to what is underneath?

I'd like for any shape placed on the stage/layer to capture the events, but clicking around the transparent background should allow me to interact with the component below.

Answer 1

You have to catch the event and trigger the SAME event on the 'underneath' element.

I made a fiddle (http://jsfiddle.net/Q5HtP/) for you, keypart:

var stage = document.getElementById('stage');
var pano = document.getElementById('pano');

pano.onclick = function(e) {
    var event = new MouseEvent('click', e);
    stage.dispatchEvent(event);
};

stage.onclick = function(e) {
   console.log(e);
   alert('click');  
};