obsługa zdarzeń ASP.NET Core Blazor

W tym artykule wyjaśniono Blazorfunkcje obsługi zdarzeń, w tym typy argumentów zdarzeń, wywołania zwrotne zdarzeń i zarządzanie domyślnymi zdarzeniami przeglądarki.

Delegowanie procedur obsługi zdarzeń

Określ procedury obsługi zdarzeń delegata w Razor znacznikach składników za pomocą @on{DOM EVENT}="{DELEGATE}"Razor składni:

• Symbol zastępczy {DOM EVENT} to zdarzenie DOM (na przykład click).
• Symbol {DELEGATE} zastępczy to procedura obsługi zdarzeń delegata języka C#.

Obsługa zdarzeń:

• Deleguj programy obsługi zdarzeń w programie Blazor Web Apps są wywoływane tylko w składnikach, które przyjmują interaktywny tryb renderowania. W przykładach w tym artykule założono, że aplikacja przyjmuje tryb renderowania interakcyjnego globalnie w składniku głównym aplikacji, zazwyczaj App składnik. Aby uzyskać więcej informacji, zobacz Blazor renderowania ASP.NET Core.
• Asynchroniczne procedury obsługi zdarzeń delegatów, które zwracają Task (async Task), są obsługiwane przez Blazor i zostały przyjęte w przykładach dokumentacji Blazor Web App i Blazor WebAssembly.
• Deleguj programy obsługi zdarzeń automatycznie wyzwalają renderowanie interfejsu użytkownika, więc nie ma potrzeby ręcznego wywoływania elementu StateHasChanged.
• Wyjątki są rejestrowane.

Ważne

Framework Blazor nie śledzi metod asynchronicznych zwracających void (async). W związku z tym cały proces kończy się niepowodzeniem, gdy wyjątek nie zostanie przechwycony, jeśli void zostanie zwrócony. Zawsze zwracaj Task/ValueTask z metod asynchronicznych.

Następujący kod powoduje:

• Wywołuje metodę UpdateHeading po wybraniu przycisku w interfejsie użytkownika.
• Wywołuje metodę CheckChanged po zmianie pola wyboru w interfejsie użytkownika.

EventHandler1.razor:

@page "/event-handler-1"

<PageTitle>Event Handler 1</PageTitle>

<h1>Event Handler Example 1</h1>

<h2>@headingValue</h2>

<p>
    <button @onclick="UpdateHeading">
        Update heading
    </button>
</p>

<p>
    <label>
        <input type="checkbox" @onchange="CheckChanged" />
        @checkedMessage
    </label>
</p>

@code {
    private string headingValue = "Initial heading";
    private string checkedMessage = "Not changed yet";

    private void UpdateHeading() => headingValue = $"New heading ({DateTime.Now})";

    private void CheckChanged() => checkedMessage = $"Last change {DateTime.Now}";
}

W poniższym przykładzie: UpdateHeading

• Jest wywoływany asynchronicznie po wybraniu przycisku.
• Czeka dwa sekundy przed zaktualizowaniem nagłówka.

EventHandler2.razor:

@page "/event-handler-2"

<PageTitle>Event Handler 2</PageTitle>

<h1>Event Handler Example 2</h1>

<h2>@headingValue</h2>

<p>
    <button @onclick="UpdateHeading">
        Update heading
    </button>
</p>

@code {
    private string headingValue = "Initial heading";

    private async Task UpdateHeading()
    {
        await Task.Delay(2000);

        headingValue = $"New heading ({DateTime.Now})";
    }
}

Wbudowane argumenty zdarzeń

W przypadku zdarzeń obsługujących typ argumentu zdarzenia określenie parametru zdarzenia w definicji metody zdarzenia jest konieczne tylko wtedy, gdy typ zdarzenia jest używany w metodzie . W poniższym przykładzie MouseEventArgs jest używana w metodzie ReportPointerLocation do ustawienia tekstu komunikatu, który raportuje współrzędne myszy, gdy użytkownik wybiera przycisk w interfejsie użytkownika.

EventHandler3.razor:

@page "/event-handler-3"

<PageTitle>Event Handler 3</PageTitle>

<h1>Event Handler Example 3</h1>

@for (var i = 0; i < 4; i++)
{
    <p>
        <button @onclick="ReportPointerLocation">
            Where's my mouse pointer for this button?
        </button>
    </p>
}

<p>@mousePointerMessage</p>

@code {
    private string? mousePointerMessage;

    private void ReportPointerLocation(MouseEventArgs e) => 
        mousePointerMessage = $"Mouse coordinates: {e.ScreenX}:{e.ScreenY}";
}

Obsługiwane EventArgs są przedstawione w poniższej tabeli.

Zdarzenie	Klasa	Uwagi DOM
Schowek	ClipboardEventArgs
Przeciągnij	DragEventArgs	DataTransfer i DataTransferItem zawierają dane przeciągniętego elementu. Zaimplementuj przeciąganie i upuszczanie aplikacji za pomocą BlazorJS przeciągania i upuszczania HTML.
Błąd	ErrorEventArgs
Zdarzenie	EventArgs	EventHandlers przechowuje atrybuty do konfigurowania mapowań między nazwami zdarzeń i typami argumentów zdarzeń.
Ukierunkowanie	FocusEventArgs	Nie obejmuje obsługi programu relatedTarget.
Dane wejściowe	ChangeEventArgs
Klawiatura	KeyboardEventArgs
mysz (klawiatura, wideo, mysz)	MouseEventArgs
Wskaźnik myszy	PointerEventArgs
Koło myszy	WheelEventArgs
Postęp	ProgressEventArgs
Dotyk	TouchEventArgs	TouchPoint reprezentuje pojedynczy punkt kontaktu na urządzeniu dotykowym.

Aby uzyskać więcej informacji, zobacz następujące zasoby:

• EventArgs klasy w źródle referencyjnym ASP.NET Core (gałąź dotnet/aspnetcore main )

  Uwaga

  Linki dokumentacji do źródła referencyjnego platformy .NET zwykle ładują domyślną gałąź repozytorium, która odzwierciedla bieżące programowanie dla następnej wersji platformy .NET. Aby wybrać tag dla określonej wersji, użyj listy rozwijanej Przełącz gałęzie lub tagi. Aby uzyskać więcej informacji, zobacz Jak wybrać tag wersji kodu źródłowego platformy ASP.NET Core (dotnet/AspNetCore.Docs #26205).

• EventHandlers przechowuje atrybuty do konfigurowania mapowań między nazwami zdarzeń i typami argumentów zdarzeń.

Niestandardowe argumenty zdarzeń

Blazor Obsługuje niestandardowe argumenty zdarzeń, które umożliwiają przekazywanie dowolnych danych do programów obsługi zdarzeń platformy .NET z niestandardowymi zdarzeniami.

Konfiguracja ogólna

Zdarzenia niestandardowe z niestandardowymi argumentami zdarzeń są zwykle włączone, wykonując następujące kroki.

W języku JavaScript zdefiniuj funkcję służącą do kompilowania niestandardowego obiektu argumentu zdarzenia z zdarzenia źródłowego:

function eventArgsCreator(event) { 
  return {
    customProperty1: 'any value for property 1',
    customProperty2: event.srcElement.id
  };
}

Parametr event jest zdarzeniem DOM.

Zarejestruj zdarzenie niestandardowe przy użyciu poprzedniego programu obsługi w inicjatorze języka JavaScript. Podaj odpowiednią nazwę zdarzenia przeglądarki na browserEventName, która dla przykładu pokazanego w tej sekcji dotyczy click wyboru przycisku w interfejsie użytkownika.

wwwroot/{PACKAGE ID/ASSEMBLY NAME}.lib.module.js {PACKAGE ID/ASSEMBLY NAME}(symbol zastępczy to identyfikator pakietu lub nazwa zestawu aplikacji):

Dla elementu Blazor Web App:

export function afterWebStarted(blazor) {
  blazor.registerCustomEventType('customevent', {
    browserEventName: 'click',
    createEventArgs: eventArgsCreator
  });
}

W przypadku aplikacji Blazor Server lub Blazor WebAssembly :

export function afterStarted(blazor) {
  blazor.registerCustomEventType('customevent', {
    browserEventName: 'click',
    createEventArgs: eventArgsCreator
  });
}

Wywołanie do registerCustomEventType jest wykonywane w skrypcie tylko raz na zdarzenie.

W przypadku wywołania metody registerCustomEventTypeużyj parametru blazor (małe litery b) dostarczonego Blazor przez zdarzenie początkowe. Chociaż rejestracja jest prawidłowa w przypadku używania Blazor obiektu (wielkie litery B), preferowaną metodą jest użycie parametru .

Niestandardowa nazwa zdarzenia w customevent poprzednim przykładzie nie może być zgodna z nazwą zdarzenia zarezerwowanego Blazor . Nazwy zarezerwowane można znaleźć w Blazor źródle referencyjnym frameworka (zobacz wywołania registerBuiltInEventType funkcji).

Uwaga

Linki dokumentacji do źródła referencyjnego platformy .NET zwykle ładują domyślną gałąź repozytorium, która odzwierciedla bieżące programowanie dla następnej wersji platformy .NET. Aby wybrać tag dla określonej wersji, użyj listy rozwijanej Przełącz gałęzie lub tagi. Aby uzyskać więcej informacji, zobacz Jak wybrać tag wersji kodu źródłowego platformy ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Zdefiniuj klasę argumentów zdarzeń:

namespace BlazorSample.CustomEvents;

public class CustomEventArgs : EventArgs
{
    public string? CustomProperty1 {get; set;}
    public string? CustomProperty2 {get; set;}
}

Powiąż zdarzenie niestandardowe z argumentami zdarzenia, dodając adnotację atrybutu [EventHandler] dla zdarzenia niestandardowego.

• Aby kompilator znalazł klasę [EventHandler] , musi zostać umieszczony w pliku klasy C# (.cs), co czyni ją normalną klasą najwyższego poziomu.
• Oznacz klasę public.
• Klasa nie wymaga członków.
• Klasa musi być nazywana "EventHandlers" w celu znalezienia Razor przez kompilator.
• Umieść klasę w przestrzeni nazw specyficznej dla aplikacji.
• Zaimportuj przestrzeń nazw do składnika Razor, w którym używane jest zdarzenie .razor.

using Microsoft.AspNetCore.Components;

namespace BlazorSample.CustomEvents;

[EventHandler("oncustomevent", typeof(CustomEventArgs),
    enableStopPropagation: true, enablePreventDefault: true)]
public static class EventHandlers
{
}

Zarejestruj procedurę obsługi zdarzeń na co najmniej jednym elemecie HTML. Uzyskaj dostęp do danych przekazanych z języka JavaScript w metodzie procedury obsługi delegatów:

@using BlazorSample.CustomEvents

<button id="buttonId" @oncustomevent="HandleCustomEvent">Handle</button>

@if (!string.IsNullOrEmpty(propVal1) && !string.IsNullOrEmpty(propVal2))
{
    <ul>
        <li>propVal1: @propVal1</li>
        <li>propVal2: @propVal2</li>
    </ul>
}

@code
{
    private string? propVal1;
    private string? propVal2;

    private void HandleCustomEvent(CustomEventArgs eventArgs)
    {
        propVal1 = eventArgs.CustomProperty1;
        propVal2 = eventArgs.CustomProperty2;
    }
}

@oncustomevent Jeśli atrybut nie jest rozpoznawany przez funkcję IntelliSense, upewnij się, że składnik lub _Imports.razor plik zawiera instrukcję dla przestrzeni nazw zawierającej klasę @usingEventHandler.

Za każdym razem, gdy zdarzenie niestandardowe jest uruchamiane w modelu DOM, program obsługi zdarzeń jest wywoływany z danymi przekazywanymi z języka JavaScript.

Jeśli próbujesz uruchomić zdarzenie niestandardowe, należy je włączyć, bubbles ustawiając jego wartość na true. W przeciwnym razie zdarzenie nie dociera do procedury obsługi Blazor, aby zostać przetworzone na niestandardową klasę atrybutów [EventHandler] języka C#. Aby uzyskać więcej informacji, zobacz MDN Web Docs: Event bubbling.

Przykład zdarzenia wklejania do niestandardowego schowka

Poniższy przykład odbiera niestandardowe zdarzenie wklejania schowka, które obejmuje moment wklejenia i tekst wklejony przez użytkownika.

Zadeklaruj niestandardową nazwę (oncustompaste) dla zdarzenia i klasę .NET (CustomPasteEventArgs), aby przechowywać argumenty zdarzeń dla tego zdarzenia:

CustomEvents.cs:

using Microsoft.AspNetCore.Components;

namespace BlazorSample.CustomEvents;

[EventHandler("oncustompaste", typeof(CustomPasteEventArgs), 
    enableStopPropagation: true, enablePreventDefault: true)]
public static class EventHandlers
{
}

public class CustomPasteEventArgs : EventArgs
{
    public DateTime EventTimestamp { get; set; }
    public string? PastedData { get; set; }
}

Dodaj kod JavaScript, aby dostarczyć dane dla EventArgs podklasy z poprzednim programem obsługi w inicjatorze języka JavaScript. Poniższy przykład obsługuje tylko wklejanie tekstu, ale można użyć dowolnych interfejsów API języka JavaScript do obsługi wklejania innych typów danych, takich jak obrazy.

wwwroot/{PACKAGE ID/ASSEMBLY NAME}.lib.module.js:

Dla elementu Blazor Web App:

export function afterWebStarted(blazor) {
  blazor.registerCustomEventType('custompaste', {
    browserEventName: 'paste',
    createEventArgs: event => {
      return {
        eventTimestamp: new Date(),
        pastedData: event.clipboardData.getData('text')
      };
    }
  });
}

W przypadku aplikacji Blazor Server lub Blazor WebAssembly :

export function afterStarted(blazor) {
  blazor.registerCustomEventType('custompaste', {
    browserEventName: 'paste',
    createEventArgs: event => {
      return {
        eventTimestamp: new Date(),
        pastedData: event.clipboardData.getData('text')
      };
    }
  });
}

W poprzednim przykładzie {PACKAGE ID/ASSEMBLY NAME} symbol zastępczy nazwy pliku reprezentuje identyfikator pakietu lub nazwę zestawu aplikacji.

Uwaga

W przypadku wywołania metody registerCustomEventTypeużyj parametru blazor (małe litery b) dostarczonego Blazor przez zdarzenie początkowe. Chociaż rejestracja jest prawidłowa w przypadku używania Blazor obiektu (wielkie litery B), preferowaną metodą jest użycie parametru .

Powyższy kod informuje przeglądarkę, że gdy wystąpi zdarzenie natywne paste :

• custompaste Zgłoś zdarzenie.
• Podaj dane argumentów zdarzeń przy użyciu podanej logiki niestandardowej:
  • W przypadku elementu eventTimestamputwórz nową datę.
  • Dla pastedData pobierz dane schowka jako tekst. Aby uzyskać więcej informacji, zobacz MdN Web Docs: ClipboardEvent.clipboardData.

Konwencje nazw zdarzeń różnią się między platformą .NET i językiem JavaScript:

• Na platformie .NET nazwy zdarzeń mają prefiks "on".
• W języku JavaScript nazwy zdarzeń nie mają prefiksu.

W składniku dołącz niestandardową procedurę Razor obsługi do elementu.

CustomPasteArguments.razor:

@page "/custom-paste-arguments"
@using BlazorSample.CustomEvents

<label>
    Try pasting into the following text box:
    <input @oncustompaste="HandleCustomPaste" />
</label>

<p>
    @message
</p>

@code {
    private string? message;

    private void HandleCustomPaste(CustomPasteEventArgs eventArgs)
    {
        message = $"At {eventArgs.EventTimestamp.ToShortTimeString()}, " +
            $"you pasted: {eventArgs.PastedData}";
    }
}

Wyrażenia lambda

Wyrażenia lambda są obsługiwane jako delegowany program obsługi zdarzeń.

EventHandler4.razor:

@page "/event-handler-4"

<PageTitle>Event Handler 4</PageTitle>

<h1>Event Handler Example 4</h1>

<h2>@heading</h2>

<p>
    <button @onclick="@(e => heading = "New heading!!!")">
        Update heading
    </button>
</p>

@code {
    private string heading = "Initial heading";
}

Często wygodne jest zamknięcie dodatkowych wartości przy użyciu parametrów metody języka C#, takich jak iteracja nad zestawem elementów. W poniższym przykładzie są tworzone trzy przyciski, z których każde wywołuje UpdateHeading i przekazuje następujące dane:

• Argument zdarzenia (MouseEventArgs) w elemencie e.
• Numer przycisku w elemencie buttonNumber.

EventHandler5.razor:

@page "/event-handler-5"

<PageTitle>Event Handler 5</PageTitle>

<h1>Event Handler Example 5</h1>

<h2>@heading</h2>

@for (var i = 1; i < 4; i++)
{
    var buttonNumber = i;

    <p>
        <button @onclick="@(e => UpdateHeading(e, buttonNumber))">
            Button #@i
        </button>
    </p>
}

@code {
    private string heading = "Select a button to learn its position";

    private void UpdateHeading(MouseEventArgs e, int buttonNumber) => 
        heading = $"Selected #{buttonNumber} at {e.ClientX}:{e.ClientY}";
}

Utworzenie dużej liczby delegatów zdarzeń w pętli może spowodować niską wydajność renderowania. Aby uzyskać więcej informacji, zobacz ASP.NET Core rendering performance best practices (Najlepsze rozwiązania dotyczące wydajności renderowania podstawowego ASP.NET CoreBlazor).

Unikaj używania zmiennej pętli bezpośrednio w wyrażeniu lambda, takim jak i w poprzednim przykładzie for pętli. W przeciwnym razie ta sama zmienna jest używana przez wszystkie wyrażenia lambda, co powoduje użycie tej samej wartości we wszystkich wyrażeniach lambda. Przechwyć wartość zmiennej w zmiennej lokalnej. W powyższym przykładzie:

• Zmienna pętli i jest przypisana do zmiennej buttonNumber.
• buttonNumber jest używany w wyrażeniu lambda.

Alternatywnie, można użyć foreach pętli z Enumerable.Range, która nie cierpi na wcześniej wspomniany problem.

@foreach (var buttonNumber in Enumerable.Range(1, 3))
{
    <p>
        <button @onclick="@(e => UpdateHeading(e, buttonNumber))">
            Button #@buttonNumber
        </button>
    </p>
}

EventCallback

Typowy scenariusz z zagnieżdżonymi komponentami polega na wykonaniu metody w komponencie nadrzędnym, gdy wystąpi zdarzenie komponentu podrzędnego. Zdarzenie onclick występujące w składniku podrzędnym jest typowym przypadkiem użycia. Aby uwidocznić zdarzenia między składnikami, użyj elementu EventCallback. Komponent nadrzędny może przypisać funkcję zwrotną do komponentu podrzędnego EventCallback.

Poniższy Child składnik pokazuje, jak skonfigurowana jest procedura obsługi przycisku onclick w celu odbierania EventCallback delegata z przykładu ParentComponent. Typ EventCallback wprowadzany jest za pomocą MouseEventArgs, co jest właściwe dla zdarzenia onclick z urządzenia peryferyjnego.

Child.razor:

<p>
    <button @onclick="OnClickCallback">
        Trigger a Parent component method
    </button>
</p>

@code {
    [Parameter]
    public string? Title { get; set; }

    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    [Parameter]
    public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
}

Składnik nadrzędny ustawia element podrzędny EventCallback<TValue> (OnClickCallback) na jego ShowMessage metodę.

ParentChild.razor:

@page "/parent-child"

<PageTitle>Parent Child</PageTitle>

<h1>Parent Child Example</h1>

<Child Title="Panel Title from Parent" OnClickCallback="ShowMessage">
    Content of the child component is supplied by the parent component.
</Child>

<p>@message</p>

@code {
    private string? message;

    private void ShowMessage(MouseEventArgs e) => 
        message = $"Blaze a new trail with Blazor! ({e.ScreenX}:{e.ScreenY})";
}

Po wybraniu przycisku w elemecie ChildComponent:

• Wywoływana jest metoda składnika ParentShowMessage. message element jest aktualizowany i wyświetlany w składniku Parent .
• Wywołanie metody StateHasChanged nie jest wymagane w metodzie wywołania zwrotnego (ShowMessage). StateHasChanged element jest wywoływany automatycznie, aby rerender Parent składnika, podobnie jak zdarzenia podrzędne wyzwalały rerendering składnika w programach obsługi zdarzeń wykonywanych w ramach elementu podrzędnego. Aby uzyskać więcej informacji, zobacz Renderowanie składników platformy ASP.NET Core Razor.

Użyj EventCallback do obsługi zdarzeń i EventCallback<TValue> do powiązania parametrów komponentu.

Preferuj silnie typizowane EventCallback<TValue> niż EventCallback. EventCallback<TValue> udostępnia ulepszone opinie o błędach, gdy jest używany niewłaściwy typ, kierując użytkowników składnika do poprawnej implementacji. Podobnie jak w przypadku innych procedur obsługi zdarzeń interfejsu użytkownika, określenie parametru zdarzenia jest opcjonalne. Użyj EventCallback, jeśli nie ma wartości przekazanej do wywołania zwrotnego.

EventCallback i EventCallback<TValue> zezwalają na asynchroniczne delegaty. EventCallback jest słabo typizowany i umożliwia przekazanie dowolnego argumentu typu w InvokeAsync(Object). EventCallback<TValue> jest silnie typizowane i wymaga przekazania argumentu T w InvokeAsync(T) pliku , który można przypisać do TValueelementu .

Wywołaj element EventCallback lub za pomocą EventCallback<TValue> polecenia i poczekaj na polecenie InvokeAsyncTask :

await OnClickCallback.InvokeAsync({ARGUMENT});

W poprzednim przykładzie {ARGUMENT} symbol zastępczy jest opcjonalnym argumentem.

W poniższym przykładzie nadrzędny-podrzędny przedstawiono technikę.

Child2.razor:

<h3>Child2 Component</h3>

<button @onclick="TriggerEvent">Click Me</button>

@code {
    [Parameter]
    public EventCallback<string> OnClickCallback { get; set; }

    private async Task TriggerEvent()
    {
        await OnClickCallback.InvokeAsync("Blaze It!");
    }
}

ParentChild2.razor:

@page "/parent-child-2"

<PageTitle>Parent Child 2</PageTitle>

<h1>Parent Child 2 Example</h1>

<div>
    <Child2 OnClickCallback="(value) => { message1 = value; }" />
    @message1
</div>

<div>
    <Child2 OnClickCallback=
        "async (value) => { await Task.Delay(2000); message2 = value; }" /> 
    @message2
</div>

@code {
    private string message1 = string.Empty;
    private string message2 = string.Empty;
}

Drugie wystąpienie Child2 składnika demonstruje wywołanie zwrotne asynchroniczne, a nowa message2 wartość jest przypisywana i renderowana z opóźnieniem dwóch sekund.

Zapobieganie akcjam domyślnym

Użyj atrybutu @on{DOM EVENT}:preventDefault dyrektywy, aby zapobiec domyślnej akcji zdarzenia, gdzie {DOM EVENT} symbol zastępczy jest zdarzeniem DOM.

Po wybraniu klucza na urządzeniu wejściowym, a fokus elementu znajduje się w polu tekstowym, przeglądarka zwykle wyświetla znak klucza w polu tekstowym. W poniższym przykładzie domyślne zachowanie jest blokowane przez określenie atrybutu @onkeydown:preventDefault dyrektywy. Gdy fokus znajduje się na elemencie <input>, licznik zwiększa się przy użyciu sekwencji klawiszy Shift++. Znak + nie jest przypisany do <input> wartości elementu. Aby uzyskać więcej informacji na temat keydown, zobacz MDN Web Docs: Document: keydown.

EventHandler6.razor:

@page "/event-handler-6"

<PageTitle>Event Handler 6</PageTitle>

<h1>Event Handler Example 6</h1>

<p>For this example, give the <code><input></code> focus.</p>

<p>
    <label>
        Count of '+' key presses: 
        <input value="@count" @onkeydown="KeyHandler" @onkeydown:preventDefault />
    </label>
</p>

@code {
    private int count = 0;

    private void KeyHandler(KeyboardEventArgs e)
    {
        if (e.Key == "+")
        {
            count++;
        }
    }
}

Określenie atrybutu @on{DOM EVENT}:preventDefault bez wartości jest równoważne .@on{DOM EVENT}:preventDefault="true"

Wyrażenie jest również dozwoloną wartością atrybutu. W poniższym przykładzie shouldPreventDefault jest polem bool, ustawionym na wartość true lub false:

<input @onkeydown:preventDefault="shouldPreventDefault" />

...

@code {
    private bool shouldPreventDefault = true;
}

Zatrzymaj propagację zdarzeń

Aby zatrzymać propagację zdarzeń w zakresie @on{DOM EVENT}:stopPropagation, użyj atrybutu Blazor dyrektywy. {DOM EVENT} jest symbolem zastępczym dla zdarzenia DOM.

stopPropagation Efekt atrybutu dyrektywy jest ograniczony do Blazor zakresu i nie rozciąga się na dom HTML. Zdarzenia muszą być propagowane do korzenia DOM HTML, zanim Blazor będzie mógł działać na nich. Aby zapobiec propagacji zdarzeń DOM HTML, należy wziąć pod uwagę następujące podejście:

• Uzyskaj ścieżkę zdarzenia, wywołując polecenie Event.composedPath().
• Filtruj zdarzenia opierając się na złożonych elementach docelowych zdarzeń (EventTarget).

W poniższym przykładzie zaznaczenie pola wyboru uniemożliwia propagację zdarzeń z drugiego elementu podrzędnego <div> do elementu nadrzędnego <div>. Ponieważ propagowane zdarzenia kliknięcia zwykle uruchamiają metodę OnSelectParentDiv , wybranie drugiego elementu podrzędnego <div> powoduje wyświetlenie komunikatu nadrzędnego <div> , chyba że zaznaczono pole wyboru.

EventHandler7.razor:

@page "/event-handler-7"

<PageTitle>Event Handler 7</PageTitle>

<h1>Event Handler Example 7</h1>

<div>
    <b>stopPropagation</b>: @stopPropagation
</div>

<div>
    <button @onclick="StopPropagation">
        Stop Propagation (stopPropagation = true)
    </button>
    <button @onclick="EnablePropagation">
        Enable Propagation (stopPropagation = false)
    </button>
</div>

<div class="m-1 p-1 border border-primary" @onclick="OnSelectParentDiv">
    <h3>Parent div</h3>

    <div class="m-1 p-1 border" @onclick="OnSelectChildDiv">
        Child div that never stops propagation to the parent div when 
        selected.
    </div>

    <div class="m-1 p-1 border" @onclick="OnSelectChildDiv" 
            @onclick:stopPropagation="stopPropagation">
        Child div that stops propagation when selected if 
        <b>stopPropagation</b> is <b>true</b>.
    </div>
</div>

<p>
    @message
</p>

@code {
    private bool stopPropagation = false;
    private string? message;

    private void StopPropagation() => stopPropagation = true;

    private void EnablePropagation() => stopPropagation = false;

    private void OnSelectParentDiv() => 
        message = $"The parent div was selected. {DateTime.Now}";

    private void OnSelectChildDiv() => 
        message = $"The child div was selected. {DateTime.Now}";
}

Fokus elementu

Wywołaj FocusAsync na odwołaniu do elementu, aby ustawić focus na elemencie w kodzie. W poniższym przykładzie wybierz przycisk, aby skoncentrować element <input> .

EventHandler8.razor:

@page "/event-handler-8"

<PageTitle>Event Handler 8</PageTitle>

<h1>Event Handler Example 8</h1>

<p>Select the button to give the <code><input></code> focus.</p>

<p>
    <label>
        Input: 
        <input @ref="exampleInput" />
    </label>
    
</p>

<button @onclick="ChangeFocus">
    Focus the Input Element
</button>

@code {
    private ElementReference exampleInput;

    private async Task ChangeFocus()
    {
        await exampleInput.FocusAsync();
    }
}