主页 / coding / 问题 / 79194806
Accepted
Mdarende
Asked: 2024-11-16 16:57:35 +0800 CST

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

  • 772

在我的blazor server侧应用程序中，我想监听mouseclick eventRazor 页面上的事件，当mouseclick事件发生时（按钮除外），我想运行一个方法。我尝试使用 JavaScript 进行以下操作，但没有成功：

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

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

在我的 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();        
    }
}
event-handling

1 个回答

  1. Best Answer

    这是一个没有额外 JS 的演示，使用计数器页面。它有一个div带有点击事件处理程序的完整页面。请注意，您需要使用stopPropagation="true"以防止按钮和其他带有 UI 事件的 UI 元素冒泡。

    @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");
    }
}
    • 1

相关问题