Для чего используется event.preventDefault() в jQuery?

Отменяет семантическое действие по умолчанию для события.

event.preventDefault() в jQuery

Категории: Events › Event Object

Отменяет семантическое действие по умолчанию для события.

Синтаксис и описание:

Добавлено в jQuery 1.0event.preventDefault()
Метод event.preventDefault() отменяет действие браузера по умолчанию, которое обычно следует за событием: переход по ссылке при клике на <a>, отправку формы при submit, переключение состояния чекбокса или радиокнопки при клике на них, прокрутку страницы стрелками и т. д. Сам обработчик при этом продолжает выполняться и остальные обработчики этого же события — тоже (в отличие от event.stopPropagation(), который останавливает всплытие, а не действие по умолчанию).
Метод не принимает аргументов и ничего не возвращает. Проверить, был ли он уже вызван для данного события, можно через event.isDefaultPrevented().

Возвращаемое значение: нет (undefined).

Примечание:
Старый способ отмены действия по умолчанию — return false; в конце обработчика. Это работает, но эквивалентно одновременному вызову event.preventDefault() и event.stopPropagation(), то есть заодно останавливает всплытие события. Если нужна только отмена действия по умолчанию, вызывайте event.preventDefault() явно.
Ещё момент:
Обработчики touchstart, touchmove и wheel, повешенные на window, document или body (а значит, и делегированные от document), современные браузеры по умолчанию считают «пассивными» (passive), чтобы не тормозить прокрутку. Внутри такого обработчика вызов event.preventDefault() не отменяет прокрутку, а браузер выводит предупреждение в консоль. Это особенность нативной модели событий, а не самого jQuery; чтобы отменять такие события, нужно явно подписаться через addEventListener(type, handler, { passive: false }).
В jQuery 3.x и 4.0:
Метод работает без изменений. Нативный аналог — тот же event.preventDefault() у объекта Event, jQuery лишь вызывает его на event.originalEvent и одновременно взводит собственный флаг для isDefaultPrevented().

Примеры:

Отменяем переход по ссылке и вместо этого логируем клик:

$( "a.no-follow" ).on( "click", function ( event ) {
  event.preventDefault();
  console.log( "Переход по ссылке отменён" );
} );

Отменяем стандартную отправку формы, чтобы отправить данные через fetch/Ajax:

$( "#order-form" ).on( "submit", function ( event ) {
  event.preventDefault();
  var data = $( this ).serialize();
  $.post( "/order", data ).done( function () {
    console.log( "Форма отправлена без перезагрузки страницы" );
  } );
} );

Спрашиваем подтверждение, прежде чем поставить галочку (в обработчике click состояние чекбокса уже новое, а preventDefault() откатывает его обратно):
```
$( "#agree" ).on( "click", function ( event ) {
  if ( $( this ).is( ":checked" ) && !confirm( "Точно согласны?" ) ) {
    event.preventDefault();
  }
} );
```

Подробнее — в статье «События в jQuery: .on(), .off() и делегирование».

[ наверх ]

event.preventDefault() в jQuery

Синтаксис и описание:

Добавлено в jQuery 1.0event.preventDefault()

Примеры:

Вопросы и ответы

Поиск по материалам

event.preventDefault() в jQuery

Синтаксис и описание:

Добавлено в jQuery 1.0event.preventDefault()

Примеры:

Продолжить изучение

События: API jQuery

Экземпляр объекта Event: API jQuery

event.stopPropagation() в jQuery

event.isDefaultPrevented() в jQuery

Вопросы и ответы