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.
something.com/whatever/#
?pointer
em seu CSSRespostas:
O seguinte irá impedir que o seu href seja executado
<a href="#" onclick="return false;">
Se você estiver usando jQuery,
event.preventDefault()
pode ser usadofonte
Experimente isto:
<a href="javascript:void(0);">link</a>
fonte
javascript:void
ejavascript:void(0)
?javascript:void()
será SyntaxError, masjavascript:void
retorna apenas undefined - o mesmo quevoid(0)
. Adam, pelo que eu posso dizer,void
evoid(0)
são funcionalmente equivalentes para este uso. --- editar: embora eu veja outros comentários que sugerem que pode recarregar a página ..Em HTML5, isso é muito simples. Apenas omita o
href
atributo.<a>Do Nothing</a>
Do MDN no atributo href da tag :
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
a
tags semhref
. 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
button
elemento e estilizá-lo com CSS. Mas o que quer que você use, evite usar um elemento arbitrário comodiv
quando possível, pois isso não é semântico de forma alguma.fonte
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
href
para que os usuários sem JS habilitado ainda possam usá-lo (como um fallback).fonte
<a href="javascript:;">Link text</a>
- é o que eu costumo usarfonte
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.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>
fonte
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; }
fonte
0.17%
. Se as pessoas aindauma 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.
fonte
NÃO USE
<a>
... em vez disso, use<span class='style-like-link'>
e depois use a classe para estilizá-la como quiser.fonte