在我的 Blazor 服务器端应用程序中：单击 razor 页面主体上的任何位置（按钮除外）时如何触发操作？

Question

在我的 blazor 服务器端应用程序中，我想监听 razor 页面上的 mouseclick 事件，当发生 mouseclick 时（按钮除外），我想运行一个方法。我尝试过使用 java 脚本，但对我不起作用：

在我的_host.cshtml中添加以下脚本：

<script>
    window.addDocumentClickListener = () => {
        document.addEventListener('click', function (e) {
            if (e.target.tagName.toLowerCase() !== 'button') {
                DotNet.invokeMethodAsync('MyProjectName', 'HandleMouseClick');
            }
        });
    };
</script>

在我的 Razor 页面中：

@inject IJSRuntime JS
...
...
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender )
    {
        await JS.InvokeVoidAsync("addDocumentClickListener");
    }

}
[JSInvokable]
public void HandleMouseClick()
{
    Action_On_Mouseclick();        
}

}

Answer 1

这是使用计数器页面的演示。 它有一个完整的插入页面

div

，带有点击事件处理程序。 请注意，您需要使用

stopPropagation="true"

来防止冒泡。

@page "/counter"

<PageTitle>Counter</PageTitle>
<div class="underlay" @onclick="BackClick">
    <div>
        <h1>Counter</h1>

        <p role="status">Current count: @currentCount</p>

        <button class="btn btn-primary" @onclick:stopPropagation="true" @onclick="IncrementCount">Click me</button>
    </div>
</div>

<style>
    .underlay {
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: transparent;
    }
</style>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        Console.WriteLine("Button Clicked");
        currentCount++;
    }

    private void BackClick()
    {
        Console.WriteLine("Background Clicked");
    }
}