Отключение динамических ссылок с помощью JavaScript

Быстрый ответ

Чтобы предотвратить переход по ссылке, воспользуйтесь методом preventDefault():

document.getElementById('linkId').onclick = function(e) { e.preventDefault(); };

Либо удалите атрибут href, что сделает ссылку недоступной для клика:

document.getElementById('linkId').removeAttribute('href');

Метод 1: Применение CSS для деактивации ссылок

Вы можете визуально отображать ссылку как некликабельную и неактивную, используя CSS:

.disable-link {
  pointer-events: none; /* Не доступно для взаимодействия */
  color: grey; /* Выглядит как недоступная */
}

Идентификатор для применения этого класса к ссылке через JavaScript:

document.getElementById('linkId').classList.add('disable-link');

Важно: проверьте поддержку pointer-events: none; браузерами, для которых вы разрабатываете сайт, поскольку некоторые могут не поддерживать данное свойство.

Метод 2: Динамическое управление ссылками при помощи JavaScript

A: Создание переключателя для управления активностью ссылки

Функция, меняющая доступность ссылки исходя из состояния:

function toggleLinkActivity(linkId, isActive) {
  const link = document.getElementById(linkId);
  if (isActive) {
    link.classList.remove('disable-link');
    link.href = 'http://example.com'; // Восстанавливаем активность ссылки
  } else {
    link.classList.add('disable-link');
    link.removeAttribute('href'); // Делаем ссылку неактивной
  }
}

Подробнее об этом расскажет наш спикер на видео

B: Защита от неожиданной навигации

Защита от случайного перехода по ссылке:

window.addEventListener('load', () => {
  const links = document.querySelectorAll('a[href]');
  links.forEach(link => {
    if (/* какое-то условие */) {
      link.onclick = e => e.preventDefault(); // Предотвращаем переход
    }
  });
});

C: jQuery на помощь!

Если вы предпочитаете jQuery, деактивация ссылок может быть простой и эффективной:

$('a').on('click', function(e) {
  if (/* какое-то условие */) {
    e.preventDefault(); // jQuery блокирует переход
  }
});

Метод 3: Точное воздействие на целевые элементы

Точное применение действий исключительно к нужным элементам:

document.querySelectorAll('.specific-class a').forEach((link) => {
  link.onclick = (e) => e.preventDefault();
});

Визуализация

До применения JavaScript ссылка кликабельна: [🚪🔓]

Наносим защиту JavaScript:

document.querySelector('a').addEventListener('click', (event) => {
  event.preventDefault(); // Блокируем переход по ссылке
});

После этого ссылка становится недействительной: [🚪🔒]

Суть: использование event.preventDefault() делает ссылку видимой, но некликабельной.

Как далее – продвинутая навигация

Упраляющие жесты свайпа и тапа на мобильных установках

В мобильном вебе деактивация ссылок может потребовать дополнительной работы, поэтому производите тестирование на разных устройствах.

Деактивация конкретногой проблемной ссылки

Для отключения конкретной ссылки без использования id вы можете перезаписать её href на URL текущей страницы:

const currentUrl = window.location.href;
document.querySelector('a#troublemakerLink').href = currentUrl; // Не проблема больше

Использование removeAttribute для отмены href

Метод removeAttribute полностью удаляет атрибутивные свойства элемента, что гарантирует его неактивность:

document.getElementById('linkId').removeAttribute('href'); // Ссылка становится неактивной

Проконсультируйтесь с документацией MDN для подробного освоения методов работы с атрибутами.

Полезные материалы

1. Метод Element: setAttribute() – Веб-API | MDN — подробное руководство по работе с атрибутами элементов.
2. JavaScript DOM EventListener — руководство по добавлению и удалению обработчиков событий.
3. Метод Event: preventDefault() – Веб-API | MDN — так можно управлять поведением ссылок с помощью JavaScript.
4. Метод HTML DOM Element removeAttribute() — инструкция по удалению атрибутов элемента.