JavaScript 全局鼠标钩子(Hook)

Question

你好，我有一个基于网络的幻灯片，它基本上是使用计时器调用的页面数量。

客户现在想要一个幻灯片中的 silverlight/flash 游戏，并且只有在触摸屏幕(触摸屏)时才激活它。这意味着我需要在 javascript 中捕获任何鼠标事件，然后让我的 Javascript 调用不同的页面(包含 silverlight/flash)。我看到的问题是幻灯片可以是任何东西:图像、视频、youtube、HTML ......随便你怎么说......如果它可以在浏览器中运行，我需要拦截任何鼠标输入/触摸。

这可能吗？

我的第一个想法是制作一个 100% 透明的

标签并将其放在所有内容之上并使其包含 onclick 事件....

感谢任何帮助

解决方案经过一番研究后，我发现它无法完成。但是 - 有一个解决方法，制作一个带有透明图像作为背景的

标签 - 让它填满整个屏幕。然后将点击事件附加到那个事件上，很快——全部完成:

<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>

请注意，当您单击按钮时，链接框不会突出显示 - 您会收到单击事件。希望它能有所帮助 - 我很难弄明白。

最佳答案

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

但是你不能在 iOS 上运行 Flash/Silverlight 并且 Adob​​e 不再支持 Andoid，不知道 Silverlight

关于JavaScript 全局鼠标钩子(Hook)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11992160/

上一篇：html - 在不使用 Javascript 的情况下仅使用 CSS 模拟滚动容器中的 Excel 列锁定

下一篇：jquery - 固定 div 的 css 垂直滚动

Answer 1

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

但是你不能在 iOS 上运行 Flash/Silverlight 并且 Adob​​e 不再支持 Andoid，不知道 Silverlight