我尝试在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
}