Запрет действий по умолчанию

Иногда может потребоваться запретить выполнение действий по умолчанию каким-либо html-элементам или переопределить действие по умолчанию. В Blazor мы можем это сделать, используя специальный атрибут компонента.

@on[event]:preventDefault

Атрибут используется для событий DOM и запрещает действия по умолчанию и может использоваться в двух формах:

• полная форма (на примере события onclick): @onclick:preventDefault="true"
• сокращенная форма: @onclick:preventDefault

Например, элемент <a> (ссылка) при срабатывании события onclick перенаправляет пользователя по адресу, указанному в атрибуте href. Запретить выполнение этого действия можно так:

<a href="http://yandex.ru" @onclick:preventDefault="true">Переход по ссылке</a>

Теперь мы можем переопределить действие по умолчанию. Например, создадим новое приложение Blazor Hybrid и изменим компонент Home.razor следующим образом:

@page "/"

@if (showAlert)
{
    <div class="alert alert-danger" role="alert">
        Hello, world!
    </div>
}

<a href="http://yandex.ru" @onclick:preventDefault="true" @onclick="Click">Переход по ссылке</a>

@code{
    private bool showAlert = false;

    private void Click()
    {
        showAlert = true;
    }
}

здесь мы запретили действие по умолчанию и назначили обработчик события onclick для ссылки:

<a href="http://yandex.ru" @onclick:preventDefault="true" @onclick="Click">Переход по ссылке</a>

Теперь вместо перехода по ссылке мы получим сообщение:

Если не запретить действие по умолчанию, а просто назначить обработчик события вот так:

<a href="http://yandex.ru" @onclick="Click">Переход по ссылке</a>

то клик по ссылке приведет к тому, что вначале мы перейдем по ссылке (откроется браузер по умолчанию) и только потом сработает обработчик события onclick.

Итого

Атрибут @on[event]:preventDefault позволяет запретить выполнение действий по умолчанию в html-элементах, а использование пары @on[event]:preventDefault и @on[event] позволяет полностью изменить поведение элемента при вызове какого-либо события.