title: Event listener on a canvas behind another element
body: <p>I have a mouse move event listener attached to my canvas. But on top of my canvas is a div with a higher z-index, this contains some menu buttons.</p>
  
  <p>The problem i face is, i want the mouse move event to still activate when the mouse is over the menu element - of which is over the canvas element.</p>
  
  <p>Currently, it acts as if the mouse is no longer on top of the canvas because the menu element takes precedence due to z-index order.</p>
  
  <p>Is there a way to make this event listener ignore any elements that get in the way?</p>
  
  <p>My code:</p>
  
  <pre><code>var canvas = new function(){
        var self = this
  
        self.outputMouseData = function(evt,el){
  
          var pos = mouse.relativePosition(evt,el);
  
          el.ctx.clearRect(0,0,el.width,el.height);
  
          el.ctx.fillStyle    = "white";
          el.ctx.font         = "bold 16px Arial";
          el.ctx.fillText(pos.x+' | '+pos.y, el.width-150,el.height-10);  
  
        }
  }
  
     elements.addEvent(foreground,'mousemove',
                       function(evt){ canvas.outputMouseData(evt,foreground); }
                       );
  </code></pre>
  
  <p>My HTML</p>
  
  <pre><code>&lt;div class="parent"&gt; 
     &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
     &lt;div class="menu"&gt;Menu output&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Parent is relative positioned. Canvas and menu are absolute positioned but menu is z-index'd on top of canvas.</p>