PreventDefault: примеры (JAVASCRIPT)

Примеры использования

Предотвращение отправки формы

document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault();
  console.log('Форма не отправлена');
});

// При отправке формы страница не перезагружается
// В консоли: 'Форма не отправлена'

Блокировка перехода по ссылке

document.querySelector('a').addEventListener('click', function(e) {
  e.preventDefault();
  console.log('Переход отменен');
});

// Клик по ссылке не ведет на другую страницу
// В консоли: 'Переход отменен'

Обработка комбинаций клавиш

document.addEventListener('keydown', function(event) {
  if (event.ctrlKey && event.key === 's') {
    event.preventDefault();
    console.log('Сохранение заблокировано');
  }
});

// Сочетание Ctrl+S не вызывает диалог сохранения страницы
// В консоли: 'Сохранение заблокировано'

Похожие методы в JavaScript

stopPropagation()

Прекращает дальнейшую передачу события через DOM-дерево, но не отменяет действие по умолчанию. Используется для изоляции обработчиков.

stopImmediatePropagation()

Останавливает передачу события и предотвращает вызов других обработчиков для этого события на том же элементе.

return false

В обработчиках, присвоенных через атрибут (onclick="..."), return false работает как вызов обоих методов. В современных обработчиках этот подход не рекомендуется.

Типичные ошибки

Использование вне обработчика события

const event = new Event('click');
event.preventDefault(); // Ошибка

// TypeError: event.preventDefault is not a function
// или предупреждение в консоли

Отмена неотменяемых событий

window.addEventListener('load', (e) => {
  e.preventDefault(); // Не сработает
});

// Событие load не имеет отменяемого действия

Попытка отмены после завершения события

button.addEventListener('click', async (e) => {
  await fetch('/api');
  e.preventDefault(); // Уже поздно
});

// Действие уже выполнено, отмена не произойдет

Изменения в спецификации

Метод остается стабильным с момента введения DOM Level 2 Events. Основные изменения касаются расширения списка отменяемых событий в новых API. Например, события Drag and Drop и Touch Events стали отменяемыми в современных браузерах.

Расширенные примеры

Кастомизация контекстного меню

document.addEventListener('contextmenu', (e) => {
  e.preventDefault();
  showCustomMenu(e.clientX, e.clientY);
});

// Появляется пользовательское меню вместо системного

Валидация при перетаскивании файлов

dropZone.addEventListener('dragover', (e) => {
  e.preventDefault();
  e.dataTransfer.dropEffect = 'copy';
});

// Браузер показывает курсор копирования

Создание одностраничного приложения

document.addEventListener('click', (e) => {
  if (e.target.matches('[data-spa-link]')) {
    e.preventDefault();
    navigate(e.target.href);
  }
});

// Навигация без перезагрузки страницы

Контроль воспроизведения медиа

video.addEventListener('seeked', (e) => {
  if (!userHasPermission) {
    e.preventDefault();
    video.currentTime = 0;
  }
});

// Ограничение перемотки для неподтвержденных пользователей

Аналоги в других языках

Python (Tkinter)

import tkinter as tk

def on_key(event):
    if event.keysym == 'Return':
        print('Enter нажат')
        return "break"  # Аналог preventDefault

root = tk.Tk()
text = tk.Text(root)
text.pack()
text.bind('<Key>', on_key)

// Возврат "break" останавливает стандартную обработку

C# (WinForms)

private void Form1_KeyDown(object sender, KeyEventArgs e)
{
    if (e.KeyCode == Keys.Enter)
    {
        e.SuppressKeyPress = true; // Аналог preventDefault
    }
}

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