如何使用blazor绑定文档事件

Question

我尝试在Blazor上编写一个简单的蛇游戏，但我找不到任何方法将我的事件绑定到文档上。 有机会将事件绑定在不同的元素上，例如div或input。 比如：<input onkeypress="@KeyPressInDiv"/> 哪里

public void KeyPressInDiv(UIKeyboardEventArgs ev)
        {....}

我想，应该有一些javascript方法的类比document.onkeydown = function (evt) {}我找到了几种方法来解决这个问题： 1）使用JS进行绑定并调用blazor代码（取自https://github.com/aesalazar/AsteroidsWasm）

document.onkeydown = function (evt) {
  evt = evt || window.event;
  DotNet.invokeMethodAsync('Test.ClientSide', 'JsKeyDown', evt.keyCode);

  //Prevent all but F5 and F12
  if (evt.keyCode !== 116 && evt.keyCode !== 123)
      evt.preventDefault();
};

document.onkeyup = function (evt) {
  evt = evt || window.event;
  DotNet.invokeMethodAsync('Test.ClientSide', 'JsKeyUp', evt.keyCode);

  //Prevent all but F5 and F12
  if (evt.keyCode !== 116 && evt.keyCode !== 123)
      evt.preventDefault();
};

并在c＃中实现一个静态类，其方法由[JSInvokable]和事件标记。 这项工作，但每次新闻都会导致可怕的延迟 2）可以在其上添加输入标记和绑定事件。 这将比以前更快地工作，但是： - 它主要看起来像一个哈克然后解决方案 - 我们无法捕捉到诸如Up / DownArrow等许多行为 是否有直接的方法来绑定来自blazor的文档事件？ 更新1：我创建了一个简单的项目，以便更好地解释我尝试实现的目标。 https://github.com/XelMed/BlazorSnake Snake有3个实现： 1）纯js - 这是一种预期的行为 2）在jsInterop的JS代码中使用js和blazor调用的blazor函数 3）在输入标签上使用输入标签 - 绑定事件来控制Snake

Answer 1

您可以直接将事件绑定到C＃方法，只需使用您需要的事件标记（onkeyup / onmousemove ....）。

@page "/"

<div>
    <input type="text" onkeyup=@KeyUp />
</div>
@functions {
    void KeyUp(UIKeyboardEventArgs e)
    {
        Console.WriteLine(e.Key);
    }

    protected override Task OnInitAsync()
    {
        return Task.CompletedTask;
    }
}

Answer 2

"Is there a direct way for binding on documents events from blazor?"

Nyet 

在Blazor你可以这样做：

<input type="button" onclick="window.alert('Hello world!')" />

也许这可以给你一些想法......

希望这可以帮助...

Answer 3

也许使用JsInterop为文档添加一个事件监听器，并为使用even参数调用C＃方法的事件分配一个匿名函数。

例如你的JsInterop.js：

document.addEventListener('onkeypress', function (e) {
    DotNet.invokeMethodAsync('Snake', 'OnKeyPress', serializeEvent(e))
});

与序列化事件如下，以避免一些怪癖：

var serializeEvent = function (e) {
    if (e) {
        var o = {
            altKey: e.altKey,
            button: e.button,
            buttons: e.buttons,
            clientX: e.clientX,
            clientY: e.clientY,
            ctrlKey: e.ctrlKey,
            metaKey: e.metaKey,
            movementX: e.movementX,
            movementY: e.movementY,
            offsetX: e.offsetX,
            offsetY: e.offsetY,
            pageX: e.pageX,
            pageY: e.pageY,
            screenX: e.screenX,
            screenY: e.screenY,
            shiftKey: e.shiftKey
        };
        return o;
    }
};

在您的C＃代码中，您将拥有：

[JSInvokable]
public static async Task OnMouseDown(UIMouseEventArgs e){
    // Do some stuff here
}