Question

我是jQuery的新手。我正在尝试解决jQuery的问题。

我正在开发的应用程序有一个Canvas，我想过滤掉进入其中的事件。

我尝试执行此操作的方法是在画布上放置一个div标签。如果事件被允许，则在画布上触发它。

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

    }


<div id="overlay"> </div> 
<canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex="0"></canvas>

我要防止的事件是F11（全屏）和Zoom。我不希望它们由画布处理，因为如果画布开始处理它们，它们将不起作用。它们需要由网页处理。

我都通过捕获键盘事件使它们都工作了

$(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) && e.ctrlKey) 
        || 
        // F11 fullscreen
        (e.which == 122)
        )
        )
    {
        // don't allow zoom with ctrl +/-
        $("GameCanvas").trigger(e);
    }   
}

我遇到的问题是我不知道如何处理鼠标事件。我想防止画布处理Ctrl +鼠标滚动（缩放）并允许其处理所有其他事件。

我触发这样的事件

$(document).on(
    {
        mousedown:mouseEvent,
        mouseup:mouseEvent,
        click:mouseEvent,
    }); 

    function mouseEvent(e)
    {
        $('GameCanvas').trigger(e);
    }

但是由于某些原因，画布似乎无法接收事件。

有人可以解释如何做吗？

还是有更好的方法来解决这个问题？

如何使用jQuery过滤事件？

0 个答案: