title: JavaScript Global mouse hook
body: <p>Hello i have a web based slideshow, which is basically an amount of pages that is called using a timer.</p>
  
  <p>The customer now wants a silverlight/flash game in a slide and only activate it when the screen is touched (touch screen). This means that i need to capture ANY mouse activity in a javascript and then have my Javascript call a different page (containing the silverlight/flash). The problem as i see it is that the slide can be anything: images, video, youtube, HTML...you name it...if it can run in a browser i need to intercept any mouse input/touch.</p>
  
  <p>Is this even possible?</p>
  
  <p>My first thought is to make a 100% transparent &lt;div&gt; tag and place it above everything and have that contain the onclick event....</p>
  
  <p>any help is appreciated</p>
  
  <p><strong>Solution</strong>
  After having researched a bit i found out it cant be done. But - there is a workaround, make a &lt;div&gt; tag with a transparent images as background - make it fill the entire screen. Then attach a click event to that one, presto - all done:</p>
  
  <pre><code>&lt;style&gt;
      body, html
      {
          margin:0px;
          height:100%;
          width:100%;
      }
  
      a
      {
          height: 50px;
          width: 150px;
          border: 1px solid black;
          margin: 10px;
          display: block;
      }
  
      a:hover
      {
          height: 50px;
          width: 150px;
          border: 1px solid black;
          margin: 10px;
          display: block;
          background-color:red;
      }
  
      #popover
      {
          width:100%;
          height:100%;        
          background-image:url('/gfx/transparent.png');
          z-index:999;
          position:absolute;
          left:0ox;
          top:0px;
      }
  
  &lt;/style&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $("#popover").click(function () {
              alert('Clicked the popover screen');
          });
      });
  &lt;/script&gt;
  &lt;h2&gt;
      Index&lt;/h2&gt;
      &lt;input type="button" value="Display" id="showbutton" /&gt;
  &lt;div&gt;
      &lt;table&gt;
          &lt;tr&gt;
          &lt;td&gt; &lt;a href="#"&gt;Test&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt; &lt;a href="#"&gt;Test&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt; &lt;a href="#"&gt;Test&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt; &lt;a href="#"&gt;Test&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt; &lt;a href="#"&gt;Test&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt; &lt;a href="#"&gt;Test&lt;/a&gt;&lt;/td&gt;
          &lt;/tr&gt;
           &lt;tr&gt;
          &lt;td&gt; &lt;a href="#"&gt;Test&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt; &lt;a href="#"&gt;Test&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt; &lt;a href="#"&gt;Test&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt; &lt;a href="#"&gt;Test&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt; &lt;a href="#"&gt;Test&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt; &lt;a href="#"&gt;Test&lt;/a&gt;&lt;/td&gt;
          &lt;/tr&gt;
           &lt;tr&gt;
          &lt;td&gt; &lt;a href="#"&gt;Test&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt; &lt;a href="#"&gt;Test&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt; &lt;a href="#"&gt;Test&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt; &lt;a href="#"&gt;Test&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt; &lt;a href="#"&gt;Test&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt; &lt;a href="#"&gt;Test&lt;/a&gt;&lt;/td&gt;
          &lt;/tr&gt;
           &lt;tr&gt;
          &lt;td&gt; &lt;a href="#"&gt;Test&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt; &lt;a href="#"&gt;Test&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt; &lt;a href="#"&gt;Test&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt; &lt;a href="#"&gt;Test&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt; &lt;a href="#"&gt;Test&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt; &lt;a href="#"&gt;Test&lt;/a&gt;&lt;/td&gt;
          &lt;/tr&gt;
           &lt;tr&gt;
          &lt;td&gt; &lt;a href="#"&gt;Test&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt; &lt;a href="#"&gt;Test&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt; &lt;a href="#"&gt;Test&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt; &lt;a href="#"&gt;Test&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt; &lt;a href="#"&gt;Test&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt; &lt;a href="#"&gt;Test&lt;/a&gt;&lt;/td&gt;
          &lt;/tr&gt;
           &lt;tr&gt;
          &lt;td&gt; &lt;a href="#"&gt;Test&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt; &lt;a href="#"&gt;Test&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt; &lt;a href="#"&gt;Test&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt; &lt;a href="#"&gt;Test&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt; &lt;a href="#"&gt;Test&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt; &lt;a href="#"&gt;Test&lt;/a&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;   
  &lt;/div&gt;
  &lt;div id="popover"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Please note that the link boxes wont highlight when you click the button - and you get the click event. Hope it helps - i had a tough time figuring it out.</p>