Событие: метод preventDefault()

Метод preventDefault() интерфейса Event сообщает агенту пользователя, что если событие не обрабатывается явно, его действие по умолчанию не должно выполняться.

Событие продолжает распространяться как обычно, если один из его обработчиков событий не вызовет stopPropagation() или stopImmediatePropagation(), которые сразу же прекращают распространение.

Как указано ниже, вызов preventDefault() для неотменяемого события, такого как событие, отправленное через EventTarget.dispatchEvent(), без указания cancelable: true не имеет эффекта.

Если пассивный обработчик вызовет preventDefault(), ничего не произойдёт, и может быть выведено предупреждение в консоль.

Переключение флажка — это действие по умолчанию при нажатии на флажок. Этот пример демонстрирует, как предотвратить это:

JavaScript

const checkbox = document.querySelector("#id-checkbox");

checkbox.addEventListener("click", checkboxClick, false);

function checkboxClick(event) {
  const warn = "preventDefault() won't let you check this!\n";
  document.getElementById("output-box").innerText += warn;
  event.preventDefault();
}

HTML

<p>Please click on the checkbox control.</p>

<form>
  <label for="id-checkbox">Checkbox:</label>
  <input type="checkbox" id="id-checkbox" />
</form>

<div id="output-box"></div>

Результат

Следующий пример демонстрирует, как остановить ввод недопустимого текста в поле ввода с помощью preventDefault(). В настоящее время следует обычно использовать встроенную валидацию форм HTML вместо этого.

HTML

Нижеприведенная форма HTML собирает данные пользователя. Так как нас интересуют только нажатия клавиш, мы отключаем autocomplete для предотвращения заполнения поля ввода браузером сохранёнными значениями.

<div class="container">
  <p>Please enter your name using lowercase letters only.</p>

  <form>
    <input type="text" id="my-textbox" autocomplete="off" />
  </form>
</div>

CSS

Мы используем немного CSS для отображения области предупреждения, когда пользователь нажимает недействительную клавишу:

.warning {
  border: 2px solid #f39389;
  border-radius: 2px;
  padding: 10px;
  position: absolute;
  background-color: #fbd8d4;
  color: #3b3c40;
}

JavaScript

И вот код JavaScript, выполняющий эту задачу. Сначала слушаем события keydown:

const myTextbox = document.getElementById("my-textbox");
myTextbox.addEventListener("keydown", checkName, false);

Функция checkName(), которая анализирует нажатую клавишу и определяет, разрешить её или нет:

function checkName(evt) {
  const key = evt.key;
  const lowerCaseAlphabet = "abcdefghijklmnopqrstuvwxyz";
  if (!lowerCaseAlphabet.includes(key)) {
    evt.preventDefault();
    displayWarning(`Please use lowercase letters only.\nKey pressed: ${key}\n`);
  }
}

Функция displayWarning(), которая отображает уведомление о проблеме. Это не самая элегантная функция, но выполняет свою задачу в данном примере:

let warningTimeout;
const warningBox = document.createElement("div");
warningBox.className = "warning";

function displayWarning(msg) {
  warningBox.innerText = msg;

  if (document.body.contains(warningBox)) {
    clearTimeout(warningTimeout);
  } else {
    // insert warningBox after myTextbox
    myTextbox.parentNode.insertBefore(warningBox, myTextbox.nextSibling);
  }

  warningTimeout = setTimeout(() => {
    warningBox.parentNode.removeChild(warningBox);
    warningTimeout = -1;
  }, 2000);
}

Результат

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

Вы можете использовать Event.cancelable, чтобы проверить, может ли событие быть отменено. Вызов preventDefault() для неотменяемого события не имеет эффекта.