Время от времени необходимо запретить пользователю переход по ссылке. Чаще всего я использую этот метод, если например, на какую-то ссылку назначен красивый стиль, а переделывать ее в другой тег желания нет.
Также бывает необходимо, чтобы при нажатии на ссылке срабатывал скрипт. В этом случае можно в href поставить #, но тогда при клике на ссылку страница проматывается вверх.
Запретить переход по ссылке можно с помощью css свойства или js скрипта.
css примеры блокировки переходы по ссылке.
Для этого используется свойство pointer-events: none, которое запрещает события указателя мыши для элементов с псевдоклассами active, click, hover. Особенность этого свойства в том, что если на эту ссылку назначено выполнение скрипта onclick, то он тоже не выполнится (пример, 2).
Пример 1. При клике на эту ссылку, перехода не произойдет.
Ссылка
Пример 2. При клике на эту ссылку не произойдет перехода и выполнение любого скрипта через событие onclick как при java Script-е, так и при jQuery.
Ссылка
Для более универсального использования, можно задать класс и назначить ему это свойства, а затем в той ссылке, где нужно ограничить переход просто ставить этот класс.
Запретить переход по ссылке через Java Script
Здесь имеется множество вариантов. Все они кроссбраузерные.
Пример 1. Просто запрещаем переход по ссылке:
Ссылка
Пример 2. Тоже самое, только в виде функции, которая сначала запрещает переход, а затем выводит сообщение:
Ссылка
Бонус на заметку
Кстати, за счет pointer-events вы можете немного защитить картинку от копирования. Чаще всего пользователи нажимают правой кнопкой мыши по картинке и выбирают «Сохранить изображение». Но если сделать так:
То при нажатии правой кнопкой мыши на картинку из контекстного меню исчезнут пункты «Открыть картинку в новой вкладке» и «Сохранить картинку». Согласитесь, это очень простой способ легкой защиты картинок от копирования без скриптов. Конечно, от всех он не защитит, но большая часть обычных пользователей не сможет копировать картинки вашего сайта.
Сегодня поговорим о функции preventDefault. Часто бывает нужно отключить стандартное поведение ссылки по клику. Убрать стандартное поведение ссылки. Как не переходить по ссылке по событию on click, или просто не отправлять форму по клику на submit. То-есть браузер просто не будет реагировать на ссылку. Это нужно например для того чтобы отправить форму с помощью jQuery или JavaScript или Аякс (ajax) или добавить свой js обработчик к форме или ссылке, заменить url перед переходом и тд.
Содержание
- Решение:
- Читайте также:
- Один комментарий на «“preventDefault или как отменить переход по ссылке”»
Решение:
Отключить событие перехода по ссылке по клику на ссылку очень просто, достаточно в самом начале функции обработчика события клика вставить следующий код:
Теперь браузер не будет переходить по ссылке.
Читайте также:
Один комментарий на «“preventDefault или как отменить переход по ссылке”»
[…] Эту функцию лучше всего поставить перед отправкой формы, как-бы валидация формы. Если все сходится, и функция вернет TRUE, отправляем форму дальше стандартными средствами или с помощью ajax. Еще будет нужно чтобы форма не отправлялась по событию submit. Как это сделать я мы уже писали в статье: Как отменить отправку формы с помощью js. […]
Друзья, как сделать запрет перехода по всем ссылкам событийно, НА чистом js, БЕЗ jquery,
Работает только с выборкой:
почему для всех элементов не работает: document.getElementsByTagName(‘a’).onclick = function().
Устал уже от этой простой и раздражительной задачи! дайте совет по делу,пожалуйста, чтобы не искать уже ничего!?
Вот млин, на jquery все всегда просто:
все, строка кода! Натив обязательно мозг за**т!
Источник: