在blazor中按钮鼠标按下时绑定到文档mouseup事件

我试图在blazor中实现js代码的等效功能：

btn1.on('mousedown', function(){
    console.log('start');
    $(document).one('mouseup', function(){
       console.log('stop');
    });
});

在Blazor中，没有js互操作，这可能吗？

---

我在文档上绑定鼠标，这样我可以在移动鼠标后在按钮上执行鼠标下移，并在文档上执行鼠标下移

您需要JSInterop来处理页外鼠标下移

添加一个脚本文件，包括以下功能-我认为它需要位于基本html SPA启动页面中Blazor js文件的上方。注意，您将需要程序集名称。我们提供了在需要时打开和关闭它的功能，因为我们并不总是需要它

window.blazor\u setMouseUpEvent=函数（显示）{
如果（显示）{
addEventListener（“mouseup”，CallBlazorButtonMouseUp）；
}
否则{
removeEventListener（“mouseup”，CallBlazorButtonMouseUp）；
}
}
函数CallBlazorMouseUp（事件）{
DotNet.invokeMethodAsync（“[YourAssemblyName]，“ButtonMouseUp”）；
}

要演示的Index.razor页面

当用户mousedown时，事件处理程序打开JS事件处理程序，然后JS事件处理程序从屏幕上的任何位置拾取mouseup事件。它调用

按钮使用

，该按钮调用

鼠标移动

，两者都是静态的。页面实例使用

mouseUpAction

注册

JsMouseUp

。

JsMouseUp

做它自己的事（在我们的例子中，更改按钮颜色并写入输出），调用

StateHasChanged

（鼠标和焦点可以在任何地方），最后注销js事件处理程序

@page "/"

@using System.Diagnostics

<button class="btn @buttoncolour" @onmousedown="(e) => OnButton(e)">Test Click</button>

@code {

    [Inject] private IJSRuntime _js { get; set; }

    [JSInvokable]
    public static Task ButtonMouseUp()
    {
        mouseUpAction?.Invoke();
        return Task.CompletedTask;
    }

    private static Action mouseUpAction;
    private string buttoncolour = "btn-success";

    protected override Task OnInitializedAsync()
    {
        mouseUpAction = JsMouseUp;
        return base.OnInitializedAsync();
    }

    private void OnButton(MouseEventArgs e)
    {
        SetMouseUp(true);
        Debug.WriteLine("Down");
        buttoncolour = "btn-danger";
    }

    private void JsMouseUp()
    {
        Debug.WriteLine("Up");
        buttoncolour = "btn-success";
        _ = InvokeAsync(StateHasChanged);
        SetMouseUp(false);
    }

    private void SetMouseUp(bool action)
    => _js.InvokeAsync<bool>("blazor_setMouseUpEvent", action);

}

---

这仅在鼠标悬停时松开（mouseup）时有效，在我的示例中，我将鼠标固定在文档上，以便在鼠标悬停在文档上后，将鼠标移开后，可以在按钮上执行鼠标下移document@Omu您需要JsInterop来处理页外鼠标。我修改了我的答案，加入了JsInterop。这其实相对简单。