O que a expressão href <a href= pôjavascript:;"> </a> faz?

Vi o seguinte href usado em páginas da web de tempos em tempos. No entanto, não entendo o que isso está tentando fazer ou a técnica. Alguém pode elaborar por favor?

<a href="javascript:;"></a>

Um <a>elemento é HTML inválido, a menos que tenha um atributo hrefou name.

Se você deseja que ele seja renderizado corretamente como um link (por exemplo, sublinhado, ponteiro de mão, etc.), o fará somente se tiver um hrefatributo.

Um código como esse é, portanto, às vezes usado como uma maneira de criar um link, mas sem a necessidade de fornecer uma URL real no hrefatributo. Obviamente, o desenvolvedor queria que o link não fizesse nada, e essa era a maneira mais fácil que ele conhecia.

Ele provavelmente tem algum código de evento javascript em outro lugar que é acionado quando o link é clicado, e é isso que ele realmente quer que aconteça, mas ele quer que pareça um <a>link de tag normal .

Alguns desenvolvedores usam href='#'para o mesmo objetivo, mas isso faz com que o navegador pule para o topo da página, o que pode não ser desejado. E ele não podia simplesmente deixar o href em branco, porque href=''é um link para a página atual (ou seja, causa uma atualização da página).

Existem maneiras de contornar essas coisas. Usar um pedaço vazio de código Javascript no hrefé um deles e, embora não seja a melhor solução, ele funciona.

basicamente, em vez de usar o link para mover páginas (ou âncoras), esse método inicia uma função javascript

<script>
function doSomething() {
  alert("hello")
}
</script>
<a href="javascript:doSomething();">click me</a>

clicar no link acionará o alerta.

Existem vários mecanismos para evitar um link para chegar ao seu destino. O da questão não é muito intuitivo.

Uma opção mais limpa é usar href="#no"onde #nohá uma âncora não definida no documento.

Você pode usar um nome mais semântico, como #disable, ou #action para aumentar a legibilidade.

Benefícios da abordagem:

• Evita o efeito "mover para o topo" do href = "#" vazio
• Evita o uso de javascript

Desvantagens:

• Você deve ter certeza de que o nome da âncora não é usado no documento.

Como o <a>elemento não está atuando como um link, a melhor opção nesses casos não é usar um <a>elemento, mas a <div>e fornecer o estilo de link desejado.

<a href="javascript:alert('Hello');"></a>

é apenas uma abreviação para:

<a href="" onclick="alert('Hello'); return false;"></a>

É uma maneira de fazer um link não fazer absolutamente nada quando clicado (a menos que os eventos Javascript estejam vinculados a ele).

É uma maneira de executar Javascript em vez de seguir um link:

<a href="Javascript: doStuff();">link</a>

Quando não há realmente javascript para executar (como o seu exemplo), ele não faz nada.

Consulte o seguinte:

<a href="Http://WWW.stackoverflow.com">Link to the website opened in different tab</a>
<a href="#MyDive">Link to the div in the page(look at the chaneged url)</a>
<a href="javascript:;">Nothing happens if there is no javaScript to render</a>

<a href="javascript:void(0);"></a>

javascript: informa ao navegador que escreverá o código javascript

Tópico antigo, mas pensei em acrescentar que o motivo pelo qual os desenvolvedores usam essa construção não é criar um link morto, mas porque URLs javascript, por algum motivo, não passam referências ao elemento html ativo corretamente.

por exemplo, handler_function(this.id)funciona como onClickum URL javascript , mas não como.

Portanto, é uma escolha entre escrever código compatível com padrões pedanticamente, que envolve a necessidade de ajustar manualmente a chamada para cada hiperlink ou código ligeiramente fora do padrão que pode ser escrito uma vez e usado em qualquer lugar.

Portanto, é usado para escrever códigos js dentro de, em hrefvez de ouvintes de eventos, onclicke evitar #links hrefpara tornar as atags válidas para html.

Eu fiz uma pesquisa sobre como usar javascript:dentro do hrefatributo.

<a href="
     javascript:
        a = 4;
        console.log(a++); 
        a += 2; 
        console.log(a++); 
        if(a < 6){ 
            console.log('a is lower than 6');
        } 
        else 
            console.log('a is greater than 6');
        function log(s){
            console.log(s);
        }
        log('function inplimentation working too');

">Click here</a>

Através desse código, você pode até escrever códigos js lá, em vez de apenas chamar funções.

Testado no chrome Versão 68.0.3440.106 (versão oficial) (64 bits)

Testado no Firefox Quantom 61.0.1 (64 bits)

A melhor maneira de sempre renderizar um link corretamente é com o css da seguinte maneira:

a {cursor: pointer !important}

Deve-se evitar seguir coisas desnecessárias como as mencionadas no tópico.