12

Eu tenho uma tag <a> com hiperlink devidamente setado. Porém, gostaria de removê-la ao disparar de um evento. A mesma tag tem um ID devidamente setado, também (único, válido, e afins).

Gostaria de saber se existe uma função para remover o atributo href e assim tornar o link inválido, ou se existe uma forma de apenas desativar esse link.

0

6 Respostas 6

15

A solução moderna para desativar um link é somente CSS: (para Browsers modernos)

$('#minhaID').css("pointer-events", "none");

// e para re-activar basta usar:
$('#minhaID').css("pointer-events", "");

Demo

Pode usar tambem assim:

$('#minhaID').attr("href", "");

Ou ainda:

$('#minhaID').removeAttr('href'); // note que esta opcção remove algumas caracteristicas importantes do elemento como focus.

dependendo da utilização que quiser dar.

Nota: O Chrome tem uma discussão aberta sobre a possibilidade de deixar de suportar pointer-events.

8
  • 1
    Solução interessante, também. Parabéns! 5/02/2014 às 19:13
  • sabe me dizer se é possível reverter esse processo e se sim, como? 6/02/2014 às 12:42
  • 1
    @DennisBraga, sim, é fácil, basta usar $('#minhaID').css("pointer-events", ""); - Exemplo: jsfiddle.net/Tn52U/1
    – Sergio
    6/02/2014 às 12:47
  • 1
    Edita a tua resposta e adiciona isso. É muito legal isso de poder retirar o link sem perder informação e poder, simplesmente via CSS, reativar. :D 6/02/2014 às 12:53
  • 1
    @DennisBraga, feito! boa ideia.
    – Sergio
    6/02/2014 às 12:54
11

Seria apenas isso?

$('a').removeAttr('href');
3
  • Teoricamente, sim... mas não funfou comigo! Pensei que estivesse fazendo errado, ou coisa do tipo. Estou chamando pelo ID do link, mas acho que esse não é ponto. 5/02/2014 às 19:00
  • UPDATE: Funcionou. Era exatamente isso, mas outra parte do meu código tava atrapalhando isso de funcionar corretamente. Me sinto até meio tapado por ter perguntado isso agora! ¬¬' 5/02/2014 às 19:02
  • 1
    Faz parte, acontece ^^ 5/02/2014 às 19:04
7

Existem várias maneiras, pelo javascript puro o ideal é que você use a referencia do seu elemento e nele use o método removeAttribute, exemplos:

document.querySelector('#minhaAncora').removeAttribute('href');
document.getElementById('minhaAncora').removeAttribute('href');

Porém quando você remove essa propriedade da ancora, essa ancora deixa de funcionar como ancora, perdendo as características dos pseudo seletores :hover, :active, :focus e :visited o que pode ser um comportamento indesejado.

Neste caso você pode substituir o valor do atributo por uma hash, exemplo:

document.querySelector('#minhaAncora').setAttribute('href', '#');

Porém isso pode influenciar o scroll do navegador dependendo dos elementos e tamanho da página, então uma outra solução é colocar no lugar um script que não faz nada, exemplo:

document.querySelector('#minhaAncora').setAttribute('href', 'javascript: ');

Ele vai manter as propriedades da ancora mas não irá fazer nada ao ser clicado. Pois o browser interpreta isso como uma "evaluação" de código durante o evento de click, porém como não há código, ele ignora o comando.

Dica para quem usa o jQuery ficaria assim:

$('#minhaAncora').attr('href', 'javascript: '); // modifica pra não fazer nada
$('#minhaAncora').attr('href', '#'); // faz o scroll mover-se para inicio do documento, mas não muda de página
$('#minhaAncora').removeAttr('href'); // remove o atributo da tag

Caso você não queira remover, pode usar o pointer-event do CSS para invalidar o uso de eventos de cursor na tag, porém isso não remove o link que ainda pode ser acessível com focus (use tab) em seguida enter, apenas browsers modernos tem suporte.

Caso você não queira remover o atributo, mas apenas remover o evento deles, é possível prevenir a ação padrão com seguinte código:

document.querySelector('#minhaAncora').addEventListener('click', function (e) {
    e.preventDefault();
});
// Compatível com todos browsers modernos, IE antigos precisa retornar false
// e a forma de adicionar eventos é por outro método.
// No caso use o jQuery:
$('#minhaAncora').on('click', function (e) {
    e.preventDefault();
});
1
  • 1
    Resposta bem sólida, também. Bom trabalho. 5/02/2014 às 19:14
6

Sugiro, além de remover o atributo, adicionar um estilo para ficar visível ao usuário:

$('#link').removeAttr('href').css({
    'cursor': 'not-allowed',
    'color': '#AAAAAA',
    'text-decoration': 'line-through'
});

Exemplo no jsfiddle.

5

Utilizando javascript puro:

document.getElementById('id').removeAttribute('href');
4

Se for o seu caso, você também pode cancelar o evento padrão de redirecionamento da âncora com o próprio evento:

$('a[href]').on('click', function(event) {

    event.preventDefault();

});
3
  • 2
    Porque não editar a sua resposta e adicionar esse conteúdo ao invés de criar outra resposta? 5/02/2014 às 19:02
  • Desta forma quando a âncora for clicada (se for o seu caso) ela não vai redirecionar para a referência. 5/02/2014 às 19:02
  • Essa função é bem mais interessante, assim não perco a informação do meu link. 5/02/2014 às 19:04

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .