.net-core - 如何使用 blazor 绑定文档事件
问题描述
我尝试在 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) 使用带有 blazor 的 js - 从带有 JsInterop 的 JS 代码中调用 blazor 函数
3) 使用输入标签 - 在输入标签上绑定事件以控制 Snake
解决方案
也许使用 JsInterop 向文档添加一个事件侦听器,并为使用偶数参数调用 C# 方法的事件分配一个匿名函数。
例如你的 JsInterop.js:
document.addEventListener('onkeypress', function (e) {
DotNet.invokeMethodAsync('Snake', 'OnKeyPress', serializeEvent(e))
});
与 serializeEvent 一样,以避免一些古怪:
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
}
推荐阅读
- java - 如何使用按钮添加或删除 EditText
- python - 删除子列表具有 nan 的主列表的索引的快速方法
- node.js - 访问系统媒体控制
- javascript - 禁用输入上的空格不适用于设备
- spacy - Spacy 中的 PhraseMatcher 是否仍然适用于错误的标记化?
- reactjs - 在 redux 存储中更改后 useSelector 未触发
- visual-studio-code - 为什么 VSC 无法通过本地访问我的 PC 文件夹?
- python - 使用 Gekko 求解微分代数方程 (DAE) 问题
- python - 我通过 PRAW 有一个荒谬的列表,我想将其存储在数据库中。最终目标是制作一个 wordcloud
- r - 什么是特征以及如何在 RFormula 中解释