Blazor @onmousedown 无法识别长按

Question

我希望我的程序能够区分短按和长按。当按短(点击)，它的工作原理，但当我保持鼠标向下@onmousedown永远不会被调用。为什么呢?

<li @onmousedown="MouseDown" @onmouseup="MouseUp">
...
</li>

DateTime mouseDownTme;
void MouseDown()
{
mouseDownTme = DateTime.UtcNow;
}
void MouseUp()
{
long milliseconds = (DateTime.UtcNow.Ticks - mouseDownTme.Ticks) / TimeSpan.TicksPerMillisecond;
if (milliseconds > 400)
{
//long press
Console.WriteLine("long press");
}
else
{
//short press
Console.WriteLine("short press");
}
}

---

编辑:这段代码可以工作。真正的问题是我试图在。net MAUI Blazor中做到这一点。我也在一个正常的blazor环境中测试了它，但似乎我犯了一个错误，因为测试再次证明了它的工作。有人知道我可以在哪里报告这个问题到。net MAUI Blazor吗?

Answer 1

您应该使用OnPointerDownOnPointerUp可以触摸和鼠标;)

GitHub完整示例

Answer 2

可以组合@onmousedown和@onmouseup:

//Code behinde
private DateTime time1 { get; set; }
private DateTime time2 { get; set; }
<li @onmousedown="() => { time1 = DateTime.Now; }"
@onmouseup="() => { time2 = DateTime.Now; }">
Click me
</li>
@if ((time1.Ticks - time2.Ticks)/ TimeSpan.TicksPerMillisecond > 400)
{
<p>Long press</p>
}
else
{
<p>short press</p>
}

Answer 3

由于我在使用MAUI Blazor时遇到了同样的问题，所以我终于找到了适合我的解决方案:

我有一些像这样的代码来绘制一个画布元素:

<canvas @onpointerdown=this.OnPointerDown @onpointerout=this.OnPointerOut @onpointerup=this.OnPointerUp @onpointermove =this.OnPointerMove>

onpointerdown和onpointermove触发一次，onpointerup只在"快速点击"时触发一次。不用再按了。当在Blazor服务器应用程序中使用此代码时，一切正常。

似乎其他触摸事件(如滚动或缩放?)触发时，按更长

最后，我在画布

中添加了以下CSS

touch-action:none;

以如下代码结束:

<canvas style="touch-action:none;" @onpointerdown=this.OnPointerDown @onpointerout=this.OnPointerOut @onpointerup=this.OnPointerUp @onpointermove =this.OnPointerMove>

这就行了:-)

Answer 4

我已经为onlongpress创建了一个包，所以请尝试一下:https://www.nuget.org/packages/Kebechet.Blazor.EventHandlers.LongPress/1.0.0-preview1

文档:https://github.com/Kebechet/Blazor.EventHandlers.LongPress