JavaScript全局鼠标钩

Question

你好，我有一个基于Web的幻灯片，这基本上是使用定时器调用的页面数量。

客户现在需要幻灯片中的silverlight/flash游戏，并且只有在触摸屏幕（触摸屏）时才会激活它。这意味着我需要在javascript中捕获任何鼠标活动，然后让我的Javascript调用另一个页面（包含silverlight/flash）。我看到的问题是幻灯片可以是任何东西：图像，视频，YouTube，HTML ......你的名字......如果它可以在浏览器中运行，我需要拦截任何鼠标输入/触摸。

这甚至可能吗？

我首先想到的是使100％的透明<DIV>标签，并把它放在高于一切，并有包含onclick事件....

任何帮助表示赞赏

解决方案 经过一番研究，我发现它无法完成。但是 - 有一个解决方法，使用透明图像作为背景制作<div>标记 - 使其填充整个屏幕。然后点击事件附加到一个，很快 - 全部完成：

<style> 
    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; 
    } 

</style> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#popover").click(function() { 
      alert('Clicked the popover screen'); 
     }); 
    }); 
</script> 
<h2> 
    Index</h2> 
    <input type="button" value="Display" id="showbutton" /> 
<div> 
    <table> 
     <tr> 
     <td> <a href="#">Test</a></td> 
     <td> <a href="#">Test</a></td> 
     <td> <a href="#">Test</a></td> 
     <td> <a href="#">Test</a></td> 
     <td> <a href="#">Test</a></td> 
     <td> <a href="#">Test</a></td> 
     </tr> 
     <tr> 
     <td> <a href="#">Test</a></td> 
     <td> <a href="#">Test</a></td> 
     <td> <a href="#">Test</a></td> 
     <td> <a href="#">Test</a></td> 
     <td> <a href="#">Test</a></td> 
     <td> <a href="#">Test</a></td> 
     </tr> 
     <tr> 
     <td> <a href="#">Test</a></td> 
     <td> <a href="#">Test</a></td> 
     <td> <a href="#">Test</a></td> 
     <td> <a href="#">Test</a></td> 
     <td> <a href="#">Test</a></td> 
     <td> <a href="#">Test</a></td> 
     </tr> 
     <tr> 
     <td> <a href="#">Test</a></td> 
     <td> <a href="#">Test</a></td> 
     <td> <a href="#">Test</a></td> 
     <td> <a href="#">Test</a></td> 
     <td> <a href="#">Test</a></td> 
     <td> <a href="#">Test</a></td> 
     </tr> 
     <tr> 
     <td> <a href="#">Test</a></td> 
     <td> <a href="#">Test</a></td> 
     <td> <a href="#">Test</a></td> 
     <td> <a href="#">Test</a></td> 
     <td> <a href="#">Test</a></td> 
     <td> <a href="#">Test</a></td> 
     </tr> 
     <tr> 
     <td> <a href="#">Test</a></td> 
     <td> <a href="#">Test</a></td> 
     <td> <a href="#">Test</a></td> 
     <td> <a href="#">Test</a></td> 
     <td> <a href="#">Test</a></td> 
     <td> <a href="#">Test</a></td> 
     </tr> 
    </table> 
</div> 
<div id="popover"> 
</div> 

请注意，链接框，当您单击该按钮不会突出 - 你得到的单击事件。希望它有帮助 - 我有一段艰难的时间计算出来。

Answer 1

$(document).bind("click", function() { 
    alert("you clicked the page"); 
}); 

但你不能运行在iOS和Adobe Flash/Silverlight的不到风度的Andoid支持了，不知道有关Silverlight