Время от времени необходимо запретить пользователю переход по ссылке. Чаще всего я использую этот метод, если например, на какую-то ссылку назначен красивый стиль, а переделывать ее в другой тег желания нет.
Также бывает необходимо, чтобы при нажатии на ссылке срабатывал скрипт. В этом случае можно в href поставить #, но тогда при клике на ссылку страница проматывается вверх.
Запретить переход по ссылке можно с помощью css свойства или js скрипта.
css примеры блокировки переходы по ссылке.
Для этого используется свойство pointer-events: none, которое запрещает события указателя мыши для элементов с псевдоклассами active, click, hover. Особенность этого свойства в том, что если на эту ссылку назначено выполнение скрипта onclick, то он тоже не выполнится (пример, 2).
Пример 1. При клике на эту ссылку, перехода не произойдет.
<a href=”https://blogjquery.ru/” style=”pointer-events: none;”>Ссылка</a>
Пример 2. При клике на эту ссылку не произойдет перехода и выполнение любого скрипта через событие onclick как при java Script-е, так и при jQuery.
<a href=”https://blogjquery.ru/” style=”pointer-events: none;” onclick=”alert(‘Какой-то скрипт’)”>Ссылка</a>
Для более универсального использования, можно задать класс и назначить ему это свойства, а затем в той ссылке, где нужно ограничить переход просто ставить этот класс.
Пример 3.
<style>.noperehod {pointer-events: none;}</style>
<a href=”https://blogjquery.ru/” class=”noperehod”>Ссылка</a>
Запретить переход по ссылке через Java Script
Здесь имеется множество вариантов. Все они кроссбраузерные.
Пример 1. Просто запрещаем переход по ссылке:
<a href=”https://blogjquery.ru/” onclick=”return false;”>Ссылка</a>
Пример 2. Тоже самое, только в виде функции, которая сначала запрещает переход, а затем выводит сообщение:
<script>
function noperevod(events) {
events.preventDefault();
alert(‘Сообщение’);
};
</script>
<a href=”https://blogjquery.ru/” onclick=”noperevod(event);”>Ссылка</a>
Бонус на заметку
Кстати, за счет pointer-events вы можете немного защитить картинку от копирования. Чаще всего пользователи нажимают правой кнопкой мыши по картинке и выбирают “Сохранить изображение”. Но если сделать так:
<img style=”pointer-events: none;” src=”ссылка_на_картинку”>
То при нажатии правой кнопкой мыши на картинку из контекстного меню исчезнут пункты “Открыть картинку в новой вкладке” и “Сохранить картинку”. Согласитесь, это очень простой способ легкой защиты картинок от копирования без скриптов. Конечно, от всех он не защитит, но большая часть обычных пользователей не сможет копировать картинки вашего сайта.
(-1 баллов, 1 оценок)
Загрузка...