Faça um link HTML que não faça nada (literalmente nada)

87

Eu quero um link que não faz nada. Eu não quero isso:

<a href="#">

porque então o URL se torna something.com/whatever/#.

A única razão pela qual quero um link é para que o usuário veja que pode clicar no texto. JavaScript está sendo usado para realizar alguma ação, então não preciso que o link vá a lugar nenhum, mas preciso que ele se pareça com um link!

Eu poderia usar algum atributo de dados e me dizer CSS para fazer os elementos parecerem links se eles tiverem esse atributo, mas parece um pouco exagero.

cerveja
fonte
O que há de errado something.com/whatever/#?
Charles Sprayberry
1
você poderia dar a ele um href em branco e retornar falso no javascript. Mas é mais semântico se você apenas alterar a propriedade do cursor para pointerem seu CSS
JohnP
@CharlesSprayberry: Existem situações em que você não quer.
PeeHaa
Essa seria uma boa pergunta para fazer no ux.stackexchange.com também.
1
Esta questão é discutida com mais detalhes aqui: stackoverflow.com/questions/134845/…
DawnPaladin

Respostas:

124

O seguinte irá impedir que o seu href seja executado

<a href="#" onclick="return false;">

Se você estiver usando jQuery, event.preventDefault()pode ser usado

Curt
fonte
Faz com que eventos onclick adicionais sejam cancelados.
Rauli Rajande
5
Faz com que a página role para o topo.
David Hempy
@DavidHempy Não sinto isso. Qual navegador?
Curt
1
@curt Google Chrome Versão 63.0.3239.84 (versão oficial) (64 bits) (ou possivelmente uma versão um pouco mais antiga há duas semanas)
David Hempy
Isso não funciona para o plugin do wordpress, role para id e o link ainda fará alguma coisa. Nesse caso, será um bug que o redirecionará para o topo da página.
Jiri Otoupal イ り オ ト ウ パ ー
88

Experimente isto:

<a href="javascript:void(0);">link</a>
alexdets
fonte
4
1 mas pergunta rápida: há uma diferença entre javascript:voide javascript:void(0)?
Adam Rackis
3
Se você tentar usar javascript: void (0) sem param, você terá SyntaxError e todos os seus scripts falharão.
alexdets
3
@alexdets javascript:void()será SyntaxError, mas javascript:voidretorna apenas undefined - o mesmo que void(0). Adam, pelo que eu posso dizer, voide void(0)são funcionalmente equivalentes para este uso. --- editar: embora eu veja outros comentários que sugerem que pode recarregar a página ..
andytuba
3
Faz diferença como você capitaliza javaScript / javascript / JavaScript / Javascript?
Tim Truston,
2
@TechyTimo Não a capitalização não importa, na verdade não deve ser maiúscula. Eu enviei uma edição.
Weston Ganger
28

Em HTML5, isso é muito simples. Apenas omita o hrefatributo.

<a>Do Nothing</a>

Do MDN no atributo href da tag :

href

Esse era o único atributo necessário para âncoras que definiam um link de origem de hipertexto, mas não é mais necessário no HTML5.


E quanto ao cursor de mão ao pairar?

Os estilos padrão para um navegador não podem mudar o cursor para um ponteiro, para atags sem href. Você pode alterar isso universalmente com o seguinte CSS.

a {
    cursor: pointer;
}
<a>Do Nothing</a>

No entanto, provavelmente é melhor ser mais seletivo sobre isso e aplicá-lo apenas aos elementos aos quais pretende adicionar manipuladores de eventos.


Que tal torná-lo com foco na guia?

Basta adicionar tabindex="0"ao elemento.

<a tabindex="0">Do Nothing</a>


Faz sentido usar um a tag sem link?

Normalmente não, provavelmente é melhor usar um buttonelemento e estilizá-lo com CSS. Mas o que quer que você use, evite usar um elemento arbitrário como divquando possível, pois isso não é semântico de forma alguma.

Alexander O'Mara
fonte
1
Com o bootstrap 4, os links que não possuem um href não são estilizados como links.
user3413723
13

Não faça um link (embora seja preferível fazê-lo) e estilize-o com CSS para que pareça um link:

p.not-a-link { text-decoration: underline; cursor: pointer } 

Ou melhor ainda, basta criar um link e deixar a função javascript que é usada e.preventDefault()para impedir o link.

Adicione também o link ao hrefpara que os usuários sem JS habilitado ainda possam usá-lo (como um fallback).

PeeHaa
fonte
1
+1 Com o debate IE5.5 concluído, um span seria melhor do que ap?
amelvin
1
Eu prefiro span. P poderia fazer uma nova linha, enquanto span não
Ronnie Oosting
9

<a href="javascript:;">Link text</a> - é o que eu costumo usar

Scott Brown
fonte
5
Isso não recarregará a página com alguns navegadores?
Curt de
@Curt: Você está certo, interpretou mal a pergunta. Você tem um comentário positivo a partir dele :-)
Scott Brown
... e eu tenho 2 votos negativos, incluindo um depois de editá-lo! Harsh!
Scott Brown
Remova o primeiro código, então terei permissão para remover meu voto negativo :) Ele não me deixará remover o voto negativo, está "bloqueado"
Curt
1
Quais navegadores isso afeta, ainda é um problema? Isso seria preferível void(0), porque é exibido na barra de status. Digo isso porque eu tenho os usuários sinalizado como um bug / erro (o que obviamente não é), então acho que tê-lo é confuso para eles.
chunk_split
4

Podemos conseguir isso usando o javascript void, que normalmente envolve a avaliação de uma expressão e o retorno de undefined, que inclui adicionar javascript:void(0);o href.

O operador void é geralmente usado apenas para obter um valor primitivo indefinido, geralmente usando “void (0)” (que é equivalente a “void 0”). Nestes casos, a variável global indefinida pode ser usada em seu lugar (assumindo que não foi atribuída a um valor não padrão).

a {
  text-decoration: initial;
}
<a href="javascript:void(0);"> This link actually does nothing when clicked</a>

Krafty Coder
fonte
2

A resposta de @ Curt funcionará, mas você pode usar um estilo de cursor em css para fazer com que pareça um link sem o incômodo de gerar um link falso. Use a mão ou o ponteiro dependendo da conformidade do navegador.

Css de ponteiro compatível com vários navegadores (do guia de estilo do cursor ):

element {
    cursor: pointer;
    cursor: hand;
}
Amelvin
fonte
@PeeHaa Apenas use o ponteiro apenas se você não quiser que ele funcione no IE5.5 e anteriores!
amelvin
3
Foi o que eu disse! Por favor, não mencione IE5.5: P Em uma nota mais séria, o compartilhamento IE5.5 é 0.17%. Se as pessoas ainda
usam
2

uma maneira que ninguém mencionou é apontar o href para um local de arquivo local vazio, como

<a href='\\'>my dead link</a>

porque? Se você usar uma estrutura como react ou angular, o compilador irá emitir alguns avisos que podem sujar o seu log ou console. Essa técnica também evita que robôs ou aranhas liguem coisas incorretamente.

1-14x0r
fonte
-1

NÃO USE <a>... em vez disso, use <span class='style-like-link'> e depois use a classe para estilizá-la como quiser.

Bryce
fonte
Não há nada de errado em usar uma tag âncora sem um link em si, sem mencionar que há muitos casos em que faria muito mais sentido fazer isso, em vez de substituí-la por uma tag pseudo-âncora. Sem mencionar que estilizar um elemento para se parecer com outro, mas ser implementado de maneira diferente, causará problemas de manutenção no futuro
Tim
Acordado. Depende inteiramente do caso de uso e do que você está tentando realizar. Eu apenas forneci isso como uma resposta para ajudar os outros a saber que essa é uma opção.
Bryce
Se for esse o caso, sugiro editá-lo para usar uma linguagem que mostre que é uma alternativa possível, em vez de afirmar em maiúsculas para não usar uma tag âncora padrão para isso, quando é perfeitamente válido fazê-lo
Tim