Для чего используют preventDefault в JavaScript?

preventDefault в JavaScript

Что такое preventDefault

preventDefault() — метод на объекте события (event), который отменяет стандартное поведение браузера для этого события. Это не отменяет само событие, а только предотвращает его default action.

Основной синтаксис

event.preventDefault();

// Пример:
document.addEventListener('click', (event) => {
  event.preventDefault();
  console.log('Клик был, но действие по умолчанию отменено');
});

Стандартные действия которые отменяются

// 1. ССЫЛКИ — переход на новую страницу
const link = document.querySelector('a');
link.addEventListener('click', (event) => {
  event.preventDefault(); // Ссылка не откроется
  console.log('Кликнул но не перешёл');
  // Можешь сделать свою обработку
  showModal('Are you sure?');
});

// 2. ФОРМЫ — отправка данных на сервер
const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
  event.preventDefault(); // Форма не отправится
  
  // Валидация на клиенте
  if (form.password.value.length < 8) {
    alert('Пароль слишком короткий');
    return;
  }
  
  // Отправить через fetch
  fetch('/api/login', {
    method: 'POST',
    body: new FormData(form)
  }).then(r => r.json()).then(data => {
    console.log('Успешно отправлено:', data);
  });
});

// 3. КНОПКИ ВНУТРИ ФОРМЫ
const submitBtn = document.querySelector('button[type="submit"]');
submitBtn.addEventListener('click', (event) => {
  event.preventDefault(); // Форма не отправится при нажатии
});

// 4. КОНТЕКСТНОЕ МЕНЮ (правый клик)
document.addEventListener('contextmenu', (event) => {
  event.preventDefault();
  // Браузерное меню не появится
  showCustomContextMenu(event.x, event.y);
});

// 5. DRAG AND DROP
const dropZone = document.getElementById('dropZone');
dropZone.addEventListener('dragover', (event) => {
  event.preventDefault(); // Позволить drop
});
dropZone.addEventListener('drop', (event) => {
  event.preventDefault(); // Предотвратить открытие файла
  const files = event.dataTransfer.files;
  console.log('Файлы загружены:', files);
});

Важные события и их defaults

// CLICK на ССЫЛКУ
<a href="/new-page">Click me</a>
// Default: переход на /new-page
link.addEventListener('click', (e) => e.preventDefault());

// SUBMIT ФОРМЫ
<form action="/login" method="POST">
  <input type="email" name="email">
  <button type="submit">Login</button>
</form>
// Default: POST запрос на /login и перезагрузка страницы
form.addEventListener('submit', (e) => e.preventDefault());

// KEYDOWN
<input type="text" id="input">
// Default: вводится символ
input.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    e.preventDefault(); // Enter не запустит default action
  }
});

// SCROLL (на некоторых событиях)
// Default: страница скролится
document.addEventListener('wheel', (e) => {
  e.preventDefault(); // Скролл не сработает
}, { passive: false }); // Важно!

Практические примеры

1. Валидация формы перед отправкой

const form = document.getElementById('signupForm');

form.addEventListener('submit', (event) => {
  event.preventDefault();
  
  const email = form.email.value;
  const password = form.password.value;
  
  // Проверка на фронте
  if (!email.includes('@')) {
    alert('Некорректный email');
    return;
  }
  
  if (password.length < 8) {
    alert('Пароль минимум 8 символов');
    return;
  }
  
  // Отправить данные
  fetch('/api/signup', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ email, password })
  })
  .then(r => r.json())
  .then(data => {
    if (data.success) {
      console.log('Аккаунт создан!');
      form.reset();
    }
  });
});

2. Глобальные горячие клавиши

document.addEventListener('keydown', (event) => {
  // Ctrl+S для сохранения
  if (event.ctrlKey && event.key === 's') {
    event.preventDefault();
    saveDocument();
  }
  
  // Ctrl+Q для выхода
  if (event.ctrlKey && event.key === 'q') {
    event.preventDefault();
    logout();
  }
  
  // Esc для закрытия модала
  if (event.key === 'Escape') {
    event.preventDefault();
    closeModal();
  }
});

3. Навигация с подтверждением

const links = document.querySelectorAll('a[data-confirm]');

links.forEach(link => {
  link.addEventListener('click', (event) => {
    event.preventDefault();
    
    const message = link.dataset.confirm;
    if (confirm(message)) {
      window.location.href = link.href;
    }
  });
});

// HTML:
// <a href="/delete" data-confirm="Are you sure?">Delete</a>

4. Drag-and-drop с собственной обработкой

const dropZone = document.getElementById('dropZone');

// Разрешить drop
dropZone.addEventListener('dragover', (e) => {
  e.preventDefault();
  e.stopPropagation();
  dropZone.classList.add('dragover');
});

dropZone.addEventListener('dragleave', () => {
  dropZone.classList.remove('dragover');
});

// Обработать drop
dropZone.addEventListener('drop', (e) => {
  e.preventDefault();
  e.stopPropagation();
  dropZone.classList.remove('dragover');
  
  const files = e.dataTransfer.files;
  handleFiles(files);
});

function handleFiles(files) {
  for (let file of files) {
    const reader = new FileReader();
    reader.onload = (e) => {
      // Загрузить файл
      uploadFile(file, e.target.result);
    };
    reader.readAsArrayBuffer(file);
  }
}

5. Собственное контекстное меню

const contextMenu = document.getElementById('contextMenu');

document.addEventListener('contextmenu', (event) => {
  event.preventDefault();
  
  // Показать собственное меню
  contextMenu.style.display = 'block';
  contextMenu.style.left = event.pageX + 'px';
  contextMenu.style.top = event.pageY + 'px';
});

// Скрыть при клике
document.addEventListener('click', () => {
  contextMenu.style.display = 'none';
});

preventDefault vs stopPropagation

// Два разных метода!

// preventDefault — отменяет default action события
event.preventDefault();
// ✓ Ссылка не откроется
// ✓ Форма не отправится
// ✗ События всё ещё всплывают (bubbling)

// stopPropagation — останавливает всплывание
event.stopPropagation();
// ✓ События не идут к parent элементам
// ✗ Default action ВСЁ ЕЩЁ происходит

// Пример разницы:
const parent = document.getElementById('parent');
const child = document.getElementById('child');

parent.addEventListener('click', () => {
  console.log('Parent clicked');
});

child.addEventListener('click', (e) => {
  e.preventDefault();      // ← Не влияет на parent
  // Parent всё ещё получит событие
});

// Чтобы предотвратить bubbling:
child.addEventListener('click', (e) => {
  e.stopPropagation();     // ← Parent не получит событие
});

// Часто нужны оба:
child.addEventListener('click', (e) => {
  e.preventDefault();
  e.stopPropagation();
});

Когда addEventListener нельзя использовать preventDefault

// ATTENTION: passive listeners
window.addEventListener('touchmove', (e) => {
  e.preventDefault(); // НЕ сработает!
}, { passive: true }); // ← Это ломает preventDefault

// Правильно:
window.addEventListener('touchmove', (e) => {
  e.preventDefault(); // Будет работать
}, { passive: false });

// На mousewheel/wheel событиях:
document.addEventListener('wheel', (e) => {
  if (zoomLevel > 100) {
    e.preventDefault(); // Отменить zoom
  }
}, { passive: false });

Проверка может ли быть отменено

element.addEventListener('click', (event) => {
  if (event.cancelable) {
    event.preventDefault();
    console.log('Default action отменён');
  } else {
    console.log('Это событие нельзя отменить');
  }
});

// Проверить было ли отменено:
if (event.defaultPrevented) {
  console.log('Default action был отменён');
}

Выводы

1. preventDefault() отменяет стандартное поведение браузера
2. Использование: ссылки, формы, контекстное меню, горячие клавиши
3. Не отменяет всплывание события (bubbling) — для этого stopPropagation()
4. Работает только если event.cancelable === true
5. Часто используется вместе со stopPropagation()
6. На passive listeners (touchmove, wheel) работает если { passive: false }
7. Лучшая практика: всегда проверяй event.cancelable перед preventDefault()