title: How to filter events with jQuery?
body: <p>I am new to jQuery . 
  I am trying to solve a problem I have with jQuery. </p>
  
  <p>The application I am developing has a Canvas and I want to filter out events going into it.</p>
  
  <p>The way I tried to do this was put a div tag over the canvas. If event is allowed trigger it on the canvas.</p>
  
  <pre><code>#overlay {
        position: fixed; /* Sit on top of the page content */
        display: block; /* Hidden by default */
        width: 100%; /* Full width (cover the whole page) */
        height: 100%; /* Full height (cover the whole page) */
        top: 0; 
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.5); /* Black background with opacity */
        z-index: 200;
  
      }
  
  
  &lt;div id="overlay"&gt; &lt;/div&gt; 
  &lt;canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex="0"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>The events I want to prevent is F11 (fullscreen) and Zoom.
  I don't want them to be handled by the canvas, because they don't work if canvas start to handle it. They need to be handled by the web page.</p>
  
  <p>I got both of them working by capturing keyboard events</p>
  
  <pre><code>$(document).on(
      {
          keydown:eventKey,
          keyup:eventKey,
      });
  
  function eventKey(e)
  {
      if (!
          (
          // don't allow zoom with ctrl +/-
          ((e.which == 107 || e.which == 109 || e.which == 96) &amp;&amp; e.ctrlKey) 
          || 
          // F11 fullscreen
          (e.which == 122)
          )
          )
      {
          // don't allow zoom with ctrl +/-
          $("GameCanvas").trigger(e);
      }   
  }
  </code></pre>
  
  <p>The problem I have is I don't know how to handle mouse events. 
  I want to prevent canvas from handling Ctrl + mouse scroll (zoom) and allow it to handle all other events.</p>
  
  <p>i trigger events like this</p>
  
  <pre><code>$(document).on(
      {
          mousedown:mouseEvent,
          mouseup:mouseEvent,
          click:mouseEvent,
      }); 
  
      function mouseEvent(e)
      {
          $('GameCanvas').trigger(e);
      }
  </code></pre>
  
  <p>But for some reason the canvas does not seems to receive the events.</p>
  
  <p>Can someone explain how to do this?</p>
  
  <p>Or is there a better way of handling this?</p>