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

您应该使用

OnPointerDown

和

OnPointerUp

，它们适用于触摸和鼠标；）

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

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

适用于普通

Blazor

和

Maui Blazor