06.03.2025

Desativando Links Dinâmicos com JavaScript

Resposta Rápida

Para evitar que um link seja seguido, use o método preventDefault():

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

Alternativamente, você pode remover o atributo href, tornando o link não clicável:

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

Método 1: Usando CSS para Desativar Links

Você pode representar visualmente o link como não clicável e inativo com CSS:

.disable-link {
  pointer-events: none; /* Não disponível para interação */
  color: grey; /* Parece indisponível */
}

Use este identificador para aplicar a classe ao link através do JavaScript:

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

Importante: Verifique o suporte do navegador para pointer-events: none; com base nos navegadores para os quais você está desenvolvendo, pois alguns podem não suportar essa propriedade.

Método 2: Gerenciando Links Dinamicamente com JavaScript

A: Criando um Alternador para Controlar a Atividade do Link

Uma função que altera a disponibilidade do link com base em seu estado:

function toggleLinkActivity(linkId, isActive) {
  const link = document.getElementById(linkId);
  if (isActive) {
    link.classList.remove('disable-link');
    link.href = 'http://exemplo.com'; // Restaurando a atividade do link
  } else {
    link.classList.add('disable-link');
    link.removeAttribute('href'); // Tornando o link inativo
  }
}

B: Proteção Contra Navegação Inesperada

Evite navegação acidental de links:

window.addEventListener('load', () => {
  const links = document.querySelectorAll('a[href]');
  links.forEach(link => {
    if (/* alguma condição */) {
      link.onclick = e => e.preventDefault(); // Impedindo navegação
    }
  });
});

C: jQuery à Salvação!

Se você preferir jQuery, desativar links pode ser simples e efetivo:

$('a').on('click', function(e) {
  if (/* alguma condição */) {
    e.preventDefault(); // jQuery bloqueia a navegação
  }
});

Método 3: Ações Direcionadas em Elementos Específicos

Aplicando ações precisamente apenas aos elementos necessários:

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

Visualização

Antes de aplicar o JavaScript, o link é clicável: [🚪🔓]

Aplicando proteção com JavaScript:

document.querySelector('a').addEventListener('click', (event) => {
  event.preventDefault(); // Bloqueando a navegação do link
});

Depois disso, o link se torna inválido: [🚪🔒]

Essência: Usar event.preventDefault() mantém o link visível, mas não clicável.

Próximos Passos - Navegação Avançada

Gerenciando Gestos de Deslizar e Tocar em Instalações Móveis

Em ambientes web mobile, desativar links pode exigir trabalho adicional, então teste em diferentes dispositivos.

Desativando um Link Problemático Específico

Para desabilitar um link específico sem usar id, você pode sobrescrever seu href para a URL da página atual:

const currentUrl = window.location.href;
document.querySelector('a#troublemakerLink').href = currentUrl; // Não é mais um problema

Usando removeAttribute para Cancelar href

O método removeAttribute remove completamente as propriedades do atributo de um elemento, garantindo sua inatividade:

document.getElementById('linkId').removeAttribute('href'); // O link se torna inativo

Consulte a documentação do MDN para um domínio detalhado dos métodos de manipulação de atributos.

Recursos Úteis

1. Método Element: setAttribute() - Web API | MDN — Um guia abrangente sobre como trabalhar com atributos de elementos.
2. JavaScript DOM EventListener — Um guia para adicionar e remover manipuladores de eventos.
3. Método Event: preventDefault() - Web API | MDN — Isto mostra como gerenciar comportamentos de links usando JavaScript.
4. Método HTML DOM Element removeAttribute() — Instruções para remover atributos de um elemento.

Video

Navigation