Início / coding / Perguntas / 79194806
Accepted
Mdarende
Asked: 2024-11-16 16:57:35 +0800 CST

No meu aplicativo do lado do servidor Blazor: como posso disparar uma ação quando qualquer lugar no corpo da página do Razor é clicado (exceto um botão)?

  • 772

No meu blazor serveraplicativo lateral, quero ouvir o mouseclick eventem uma página do Razor e, quando mouseclickocorrer (exceto em um botão), quero executar um método. Tentei seguir com JavaScript, mas não funcionou para mim:

no meu _host.cshtml adicionei o seguinte script:

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

na minha página 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 respostas

  1. Best Answer

    Aqui está uma demonstração sem JS extra, usando a página Counter. Ela tem uma página completa divcom manipulador de eventos de clique. Observe que você precisa usar stopPropagation="true"para evitar borbulhamento em botões e outros elementos de UI com eventos de 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

relate perguntas