Метод preventDefault() интерфейса Event сообщает User agent, что если событие не обрабатывается явно, его действие по умолчанию не должно выполняться (например, можно отменить переход по ссылке, при нажатии на нее, и выполнить другое действие, см. пример ниже).
event.preventDefault() не останавливает дальнейшее распространение событий на DOM. Для этого следует использовать event.stopPropagation() (подробнее...).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="noLink"><a href="https://flagman.top">Эта ссылка не будет работать</a></div> <div id="link"><a href="https://flagman.top">Эта ссылка рабочая</a></div> <script> let link = document.querySelector("#noLink"); // выберем элемент с id="noLink" link.onclick = function (event) { event.preventDefault(); // отменим действие по умолчанию для ссылки с id="noLink" link.textContent="Переход по ссылке (действие по умолчанию) отменен, выполнена замена текста" }; </script> </body> </html> |
Вызов метода preventDefault() для события, не подлежащего отмене, например события, отправленного через EventTarget.dispatchEvent(), без указания cancelable:true не имеет эффекта.
Синтаксис метода preventDefault():
1 |
event.preventDefault(); |
Пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html> <head> <title>Пример preventDefault</title> </head> <body> <div id="link"> <a href="https://flagman.top" >Это ссылка с отмененным действием по умолчанию</a > </div> <p>Пожалуйста, щёлкните по флажку.</p> <form> <input type="checkbox" id="my-checkbox" /> <label for="my-checkbox" >Это флажок с отмененным действием по умолчанию</label > </form> </body> <script> // Функция отмены действия по умолчанию function stopDefAction(evt) { evt.preventDefault(); this.textContent = "Действие по умолчанию для ссылки отменено"; } // Выберем элементы и навесим обработчик "click" document .getElementById("my-checkbox") .addEventListener("click", stopDefAction, false); let link = document.getElementById("link"); link.addEventListener("click", stopDefAction, false); </script> </html> |
Примечания:
- Вызов preventDefault() на любой стадии выполнения потока событий отменяет событие, а это означает, что любое действие по умолчанию обычно принимается как результат события, которое не произойдёт.
- В Gecko 6.0, вызов preventDefault() приводит к переходу значения event.defaultPrevented в состояние true.
Вы можете использовать event.cancelable чтобы проверить, является ли событие отменяемым. Вызов preventDefault() для неотменяемых событий не имеет никакого эффекта.