title: How to propagate a click event from a shape in the Upper layer to an image in the Lower Layer using KonvaJS?
body: <blockquote>
    <p><strong>Disclaimer</strong>: it may be considered this post is a duplicate of <a href="https://stackoverflow.com/questions/35228837/konva-propagate-events-between-layers">this post</a> but I have demonstrated my need specifically.</p>
  </blockquote>
  
  <p>I have a case in my <a href="http://konvajs.github.io/" rel="nofollow noreferrer">KonvaJS</a> application where I need to propagate a click event from the Rectangle shape (that is a child of the <strong>Upper Layer</strong>) to several images that are added to the <strong>Lower Layer</strong>.</p>
  
  <p>Please note that I have in the <strong>Lower layer</strong> more than 50 objects between images and shapes, so how can I now what is the target object in the Lower Layer.</p>
  
  <p>Kindly here is an example to demonstrate my need:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> var width = window.innerWidth;
   var height = window.innerHeight;
  
   var stage = new Konva.Stage({
     container: 'container',
     width: width,
     height: height
   });
  
   var lowerLayer = new Konva.Layer();
   var upperLayer = new Konva.Layer();
  
   //lion
   var lionImage = new Image();
   lionImage.onload = function() {
  
     var lion = new Konva.Image({
       x: 50,
       y: 50,
       image: lionImage,
       width: 106,
       height: 118
     });
  
     // add the shape to the layer
     lowerLayer.add(lion);
     stage.draw();
  
     lion.on("click", function() {
       alert("you clicked the lion");
     });
  
   };
   lionImage.src = 'http://konvajs.github.io/assets/lion.png';
  
   //monkey
   var monkeyImage = new Image();
   monkeyImage.onload = function() {
  
     var monkey = new Konva.Image({
       x: 200,
       y: 50,
       image: monkeyImage,
       width: 106,
       height: 118
     });
  
     // add the shape to the layer
     lowerLayer.add(monkey);
     stage.draw();
  
     monkey.on("click", function() {
       alert("you clicked the monkey");
     });
   };
   monkeyImage.src = 'http://konvajs.github.io/assets/monkey.png';
  
   var upperTransparentBox = new Konva.Rect({
     x: 0,
     y: 0,
     height: stage.height(),
     width: stage.width(),
     fill: 'transparent',
     draggable: false,
     name: 'upperTransparentBox'
   });
   upperTransparentBox.on("click", function() {
     alert("you clicked the upper Transparent Box");
   });
   upperLayer.add(upperTransparentBox);
  
   // add the layer to the stage
   stage.add(lowerLayer);
   stage.add(upperLayer);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;script src="https://cdn.rawgit.com/konvajs/konva/1.0.2/konva.min.js"&gt;&lt;/script&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Konva Image Demo&lt;/title&gt;
    &lt;style&gt;
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #F0F0F0;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="container"&gt;&lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>