绑定到 blazor 中按钮 mousedown 上的文档 mouseup 事件答案

【问题标题】：bind to document mouseup event on mousedown of a button in blazor绑定到 blazor 中按钮 mousedown 上的文档 mouseup 事件
【发布时间】：2021-03-21 09:51:08
【问题描述】：

我正在尝试在 blazor 中做相当于 js 代码：

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

在没有 js 互操作的情况下，这在 Blazor 中是否可行？

我将 mouseup 绑定在文档上，所以我可以在将鼠标移开后在按钮上执行 mousedown 并在文档上执行 mouseup

【问题讨论】：

标签： blazor

【解决方案1】：

你需要 JSInterop 来处理页面外的 mouseup。

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

window.blazor_setMouseUpEvent = function (show) {
    if (show) {
        window.addEventListener("mouseup", CallBlazorButtonMouseUp);
    }
    else {
        window.removeEventListener("mouseup", CallBlazorButtonMouseUp);
    }
}

function CallBlazorMouseUp(event) {
    DotNet.invokeMethodAsync("[YourAssemblyName]", "ButtonMouseUp");
}

要演示的 Index.razor 页面。

当用户 mousedowns 时，事件处理程序打开 JS 事件处理程序，然后从屏幕上的任何位置拾取 mouseup 事件。它调用ButtonMouseUp，后者调用mouseUpAction，都是静态的。页面实例注册JsMouseUp 和mouseUpAction。 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) 才有效，在我的示例中，我将 mouseup 绑定在文档上，因此我可以在将鼠标移开后在按钮上执行 mousedown在文档上执行 mouseup
@Omu 你需要 JsInterop 来处理页面外的 mouseup。我已经修改了我的答案以包括 JsInterop。其实比较简单。