jquery - 如何使用 jQuery 过滤事件？

Question

我是 jQuery 新手。我正在尝试解决我在使用 jQuery 时遇到的问题。

我正在开发的应用程序有一个画布，我想过滤掉进入它的事件。

我尝试这样做的方法是在画布上放置一个 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（全屏）和缩放。我不希望它们被画布处理，因为如果画布开始处理它们，它们就不起作用。它们需要由网页处理。

我通过捕获键盘事件让他们两个都工作

$(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);
    }

但由于某种原因，画布似乎没有收到事件。

有人可以解释如何做到这一点吗？

或者有没有更好的方法来处理这个？

标签： jqueryeventsfilter