Event.preventDefault()
Метод preventDefault () интерфейса Event сообщает User agent, что если событие не обрабатывается явно, его действие по умолчанию не должно выполняться так, как обычно. Событие продолжает распространяться как обычно, до тех пор, пока один из его обработчиков не вызывает методы stopPropagation () или stopImmediatePropagation () , любой из которых сразу же прекращает распространение.Как отмечено ниже, вызов метода preventDefault () для события, не подлежащего отмене, например события, отправленного через EventTarget.dispatchEvent () , без указания cancelable: true не имеет эффекта.
Синтаксис
event.preventDefault();
Пример
По умолчанию щелчок по флажку переключает его состояние на противоположное. В этом примере показано, как предотвратить такое поведение:
doctype html> html> head> title>Пример preventDefaulttitle> script> function stopDefAction(evt) evt.preventDefault(); > document .getElementById("my-checkbox") .addEventListener("click", stopDefAction, false); script> head> body> p>Пожалуйста, щёлкните по флажку.p> form> input type="checkbox" id="my-checkbox" /> label for="my-checkbox">Checkboxlabel> form> body> html>
Вы можете посмотреть работу preventDefault в действии здесь.
В следующем примере некорректный ввод останавливается и вводимый символ не добавляется в поле с preventDefault() .
DOCTYPE html> html> head> title>Пример preventDefaulttitle> script>
function Init() var myTextbox = document.getElementById("my-textbox"); myTextbox.addEventListener("keypress", checkName, false); > function checkName(evt) var charCode = evt.charCode; if (charCode != 0) if (charCode 97 || charCode > 122) evt.preventDefault(); alert( "Пожалуйста, используйте только буквы нижнего регистра на латинице" + "\n" + "charCode: " + charCode + "\n", ); > > >
script> head> body onload="Init ()"> p>Пожалуйста, введите своё имя, используя только буквы нижнего регистра на латинице.p> form> input type="text" id="my-textbox" /> form> body> html>
Результат выполнения кода:
Примечания
Вызов preventDefault на любой стадии выполнения потока событий отменяет событие, а это означает, что любое действие по умолчанию обычно принимается реализацией, как результат события, которое не произойдёт.
Примечание: В Gecko 6.0, вызов preventDefault() приводит к event.defaultPrevented к переходу значения в состояние True .
Вы можете использовать event.cancelable (en-US) чтобы проверить, является ли событие отменяемым. Вызов preventDefault для неотменяемых событий не имеет никакого эффекта.
preventDefault не останавливает дальнейшее распространение событий на DOM. Для этого следует использовать event.stopPropagation (en-US) .
Спецификации
| Specification |
|---|
| DOM Standard # ref-for-dom-event-preventdefault③ |
Совместимость с браузерами
BCD tables only load in the browser
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Курсы javascript
Здравствуйте.
При привязке события click к родителю, событие срабатывает и при клике на дочерние элементы. Проблема состоит в том, что у меня дочерние элементы иногда выходят за рамки родителя, к которому привязано событие. Нужно при этом запретить вызов события при клике на тот участок, что выходит за рамки родителя.
Google может много рассказать о том, как запретить вызов события при клике на дочерний элемент. Но мне нужен полный запрет дочернего элемента. Нужен запрет только на том участке дочернего элемента, который выходит за рамки родителя.
Ссылка на песочницу — http://jsfiddle.net/7uw5b/ — с демонстрацией проблемы. В комментариях ещё раз описана задача.
Если перефразировать, то нужно чтобы клик вызывался только при клике на область в пределах границ родителя и никак не реагировал при клике на дочерние элементы, которые полностью «ВНЕ ГРАНИЦ» родителя или на УЧАСТКИ дочерних элементов, которые находятся вне границ родителя.
Подобное вообще возможно?
Буду благодарен любым подсказкам.
PS: В примере иcпользуется jQuery, но против ответов на чистом JS также ничего не имею.
Как запретить клик на JS, для элементов без нужного класса?
Друзья, есть три класса, для них нужно разрешить по умолчанию клик по тегу A, а для всех остальных у которых нет этих трех классов, запретить, вот пример но он работает в обратном направлении, запрещает клик для элементов с этими тремя классами. Вопрос, а как сделать НАОБОРОТ?
$('.swiper-slide-next a, .swiper-slide-active a, .swiper-slide-prev a').on('click touchstart', function (e) < e.preventDefault(); return false; >);- Вопрос задан более трёх лет назад
- 4882 просмотра
Как запретить переход по ссылке через css и js
Время от времени необходимо запретить пользователю переход по ссылке. Чаще всего я использую этот метод, если например, на какую-то ссылку назначен красивый стиль, а переделывать ее в другой тег желания нет.
Также бывает необходимо, чтобы при нажатии на ссылке срабатывал скрипт. В этом случае можно в href поставить #, но тогда при клике на ссылку страница проматывается вверх.
Запретить переход по ссылке можно с помощью css свойства или js скрипта.
css примеры блокировки переходы по ссылке.
Для этого используется свойство pointer-events: none, которое запрещает события указателя мыши для элементов с псевдоклассами active, click, hover. Особенность этого свойства в том, что если на эту ссылку назначено выполнение скрипта onclick, то он тоже не выполнится (пример, 2).
Для более универсального использования, можно задать класс и назначить ему это свойства, а затем в той ссылке, где нужно ограничить переход просто ставить этот класс.
Запретить переход по ссылке через Java Script
Здесь имеется множество вариантов. Все они кроссбраузерные.
Бонус на заметку
Кстати, за счет pointer-events вы можете немного защитить картинку от копирования. Чаще всего пользователи нажимают правой кнопкой мыши по картинке и выбирают «Сохранить изображение». Но если сделать так:
То при нажатии правой кнопкой мыши на картинку из контекстного меню исчезнут пункты «Открыть картинку в новой вкладке» и «Сохранить картинку». Согласитесь, это очень простой способ легкой защиты картинок от копирования без скриптов. Конечно, от всех он не защитит, но большая часть обычных пользователей не сможет копировать картинки вашего сайта.