使用 Flex 在 Canvas 内处理键盘事件的问题 [英] Problem with handling keyboard events inside a Canvas using Flex

问题描述

出于某种原因，我定义的事件侦听器似乎从不接收任何事件，尽管我认为应该如此.下面是我使用的 MXML 代码的简短描述:

For some reason, the event listener I define never seems to receive any events, although I believe it should. Here's a very short description of the MXML code I'm using:

WindowedApplication
    VBox (root box)
        MenuBar
        TabNavigator
            VBox (first tab)
                Canvas
            VBox (second tab)

如果我将 KEY_DOWN 事件的侦听器添加到 WindowedApplication 或根 VBox，处理程序会很好地接收事件.但是，如果我将侦听器添加到 Canvas 或第一个选项卡 VBox，处理程序似乎永远不会收到任何消息.(我在这里假设只需单击画布区域即可获得焦点 - 我说得对吗?)

If I add a listener for KEY_DOWN events to WindowedApplication or the root VBox, the handler receives the events just fine. But if I add the listener to the Canvas or the first tab VBox, the handler never seems to receive any. (I assume here that just clicking on the Canvas area gives it focus - am I correct?)

我刚刚开始使用 Flex，所以我希望我在某个地方犯了一个愚蠢的初学者错误.我会非常感谢任何帮助.谢谢！

I'm just starting out with Flex, so I'm hoping I made a silly beginner's mistake somewhere. I'd be very grateful for any help. Thanks!

推荐答案

同意 Ryan 的观点，我想补充一点，我有时发现在处理一般的键盘事件时将我的听众连接到事件的capture 阶段，而不是目标或冒泡阶段(注意第三个参数，默认为 false):

Agree with Ryan, and I'd add that I've sometimes found it helpful, when handling keyboard events in general, to wire up my listeners to the event's capture phase, rather than the target or bubbling phases (note the third argument, false by default):

stage.addEventListener(KeyboardEvent.KEY_DOWN, handleKeyDown, true);

以一个休闲游戏为例，其中箭头键以某种方式控制核心动作(俄罗斯方块，也许——向左旋转，向右旋转)，在捕获阶段响应事件意味着可以具有明显的优势.来自文档:

Thinking for instance of a casual game in which the arrow keys control the core action somehow (Tetris, maybe -- rotate left, rotate right), responding to an event during the capture phase means can have distinct advantages. From the docs:

在捕获阶段，Flex 检查显示中事件的祖先列表以查看哪些已注册作为事件的侦听器.柔性从根祖先开始继续向下显示列表到目标的直接祖先.多数情况在这种情况下，根祖先是Stage，然后是 SystemManager 和然后是 Application 对象.

In the capturing phase, Flex examines an event's ancestors in the display list to see which ones are registered as a listener for the event. Flex starts with the root ancestor and continues down the display list to the direct ancestor of the target. In most cases, the root ancestors are the Stage, then the SystemManager, and then the Application object.

因此，在这种情况下，您可以确保舞台的侦听器将在其他任何人之前首先收到通知，并且可以相应地做出响应——通过完全终止事件传播(有时您可能想要这样做)或通过将其转换为更特定于应用程序的自定义事件:

So in this case, you can be sure the stage's listener will get the notification first, before anyone else, and can respond accordingly -- either by terminating the event-propagation entirely (sometimes you might want to do that) or by translating it into a more application-specific, custom event:

private function handleKeyDown(event:KeyboardEvent):void
{
    if (event.keyCode == Keyboard.LEFT)
    {
        dispatchEvent(new Event("rotateLeft"));
    }
    else if (event.keyCode == Keyboard.RIGHT)
    {
        dispatchEvent(new Event("rotateRight"));
    }
    else
    {
        event.stopPropagation();
    }
}   

...并防止您在整个应用程序中使用键盘监听器.

... and keeping you from peppering keyboard listeners all over your app.

事件传播阶段在此处有更详细的描述.也请查看一下 - 里面有很多值得了解的重要信息.

Event-propagation phases are described in more detail here. Check it out as well -- there's great info in there that's well worth knowing.

这篇关于使用 Flex 在 Canvas 内处理键盘事件的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！