От автора: недавно на работе была поднята тема того, как делается блокировка ссылок. В прошлом году каким-то образом к стилям наших шрифтов был добавлен якорь disabled, пока я этого не видел. Есть проблема: в HTML нет реального способа заблокировать тег a (с валидным атрибутом href). А зачем вообще это делать? Ссылки лежат в основе веба.
В какой-то момент я понял, что моим коллегам это не понравится, поэтому я начал думать, как реализовать блокировку ссылок. Понимая, что это потребует много времени, я хотел доказать, что затея не стоит тех усилий и кода, который придется поддерживать. Но я боялся, что если покажу, что это все-таки сделать можно, они проигнорируют все мои предупреждения и просто используют мой пример как доказательство того, что все в порядке. Меня это не потрясло, но я подумал, что вам может пригодиться мое исследование.
Просто не делайте этого
Заблокированная ссылка уже не ссылка, это текст. Вам нужно пересмотреть дизайн, если в нем есть заблокированные ссылки.
Как перейти по внешней ссылке, если переход блокируется ВКонтакте? (Без фоновой музыки)
В BootStrap есть примеры применения класса .disabled к якорям, я их ненавижу. По крайней мере, они сказали, что этот класс всего лишь добавляет стиль disabled. Формулировка вводит в заблуждение. Чтобы реально отключить ссылку, недостаточно просто придать ей вид отключенной ссылки.
Надежный способ: удалите href
Если вы приняли решение игнорировать мои предупреждения и все еще хотите заблокировать ссылку, то лучший способ, который я знаю – удалите href атрибут.
Из спецификации Hyperlink: «Атрибут href в тегах a и area необязателен; когда атрибут отсутствует, эти элементы не создают гиперссылки.»
У MDN определение попроще: «Для создания плейсхолдер ссылки этот атрибут можно пропустить (в HTML5). Плейсхолдер ссылка похожа на обычную ссылку, но она никуда не ведет.»
Стандартный JS код вставки и удаления атрибута href:
Источник: webformyself.com
Как запретить переход по ссылке | CSS/JavaScript
Для того, чтобы нельзя было переходить по ссылке, она не была кликабельна (см. поддержка pointer-events браузерами):
После чего она становится недоступна и для события onclick:
То есть похожа на disabled
Запрет перехода по ссылке в JavaScript
Я ссылка, по мне не перейти, но я покажу сообщение document.getElementById(‘noLink1’).addEventListener(‘click’, function(e) < e.preventDefault(); alert(‘Скрипт сработал’); >, false);
Я ссылка, по мне не перейти, но я покажу сообщение function raz(e) < e.preventDefault(); alert(‘Скрипт сработал’); >;
Я ссылка, по мне не перейти, но я покажу сообщение document.getElementById(‘noLink2’).onclick = function()< alert(‘Скрипт сработал’); return false; // подробнее про return false; >;
Я ссылка, по мне не перейти, но я покажу сообщение function raz1() < alert(‘Скрипт сработал’); >;
Я ссылка, по мне можно перейти, но перед этим я покажу сообщение function raz2() < alert(‘Скрипт сработал’); return false; >;
Я ссылка, по мне можно перейти document.getElementById(‘noLink3’).addEventListener(‘click’, function(e) < return false; alert(‘Скрипт сработал’); >, false);
Переход по внешней ссылке вконтакте самым простым способом
Источник: shpargalkablog.ru
preventDefault или как отменить переход по ссылке
Сегодня поговорим о функции preventDefault. Часто бывает нужно отключить стандартное поведение ссылки по клику. Убрать стандартное поведение ссылки. Как не переходить по ссылке по событию on click, или просто не отправлять форму по клику на submit. То-есть браузер просто не будет реагировать на ссылку.
Это нужно например для того чтобы отправить форму с помощью jQuery или JavaScript или Аякс (ajax) или добавить свой js обработчик к форме или ссылке, заменить url перед переходом и тд.
Решение:
Отключить событие перехода по ссылке по клику на ссылку очень просто, достаточно в самом начале функции обработчика события клика вставить следующий код:
jQuery(‘a’).on(‘click’, function (e) < e.preventDefault(); // этот код предотвращает стандартное поведение браузера по клику // остальной код >);
Теперь браузер не будет переходить по ссылке.
- Клик вне элемента — jQuery click outside
- Full page jQuery plugin scrolling
- preventDefault или как отменить переход по ссылке
- jQuery touch swipe или как отследить жесты
Источник: wiki.pwodev.com