html executar via - Qual valor de “href” devo usar para links de JavaScript, “#” ou “javascript: void (0)”?

'#' levará o usuário de volta ao topo da página, então eu geralmente uso o void(0) .

javascript:; também se comporta como javascript:void(0);

O primeiro, idealmente com um link real para seguir caso o usuário tenha o JavaScript desabilitado. Apenas certifique-se de retornar false para evitar que o evento click seja acionado se o JavaScript for executado.

<a href="#" onclick="myJsFunc(); return false;">Link</a>

Se você usa o Angular2, desta forma funciona:

<a [routerLink]="" (click)="passTheSalt()">Click me</a> .

Veja aqui https://.com/a/45465728/2803344

Nem se você me perguntar;

Se o seu "link" tiver o único propósito de executar algum código JavaScript, ele não se qualifica como um link; em vez disso, um pedaço de texto com uma função JavaScript acoplada a ele. Eu recomendaria usar uma tag <span> com um onclick handler anexado a ela e algum CSS básico para imitar um link. Links são feitos para navegação, e se o seu código JavaScript não é para navegação, não deve ser uma tag <a> .

Exemplo:

function callFunction() { console.log("function called"); }

.jsAction {
    cursor: pointer;
    color: #00f;
    text-decoration: underline;
}

<p>I want to call a JavaScript function <span class="jsAction" onclick="callFunction();">here</span>.</p>

Eu uso o seguinte

<a href="javascript:;" onclick="myJsFunc();">Link</a>

em vez de

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

# é melhor que javascript:anything , mas o seguinte é ainda melhor:

HTML:

<a href="/gracefully/degrading/url/with/same/functionality.ext" class="some-selector">For great justice</a>

JavaScript:

$(function() {
    $(".some-selector").click(myJsFunc);
});

Você deve sempre se esforçar para uma degradação elegante (no caso de o usuário não ter o JavaScript ativado ... e quando estiver com as especificações e o orçamento). Além disso, considera-se inadequado usar os atributos e o protocolo JavaScript diretamente em HTML.

Eu recomendo usar um elemento <button> , especialmente se o controle é suposto para produzir uma alteração nos dados. (Algo como um POST.)

É ainda melhor se você injetar os elementos discretamente, um tipo de aprimoramento progressivo. (Veja este comentário )

Eu costumo ir para

<a href="javascript:;" onclick="yourFunction()">Link description</a>

É mais curto que o javascript: void (0) e faz o mesmo.

Eu escolhi usar javascript:void(0) , porque usar isso poderia impedir o clique direito para abrir o menu de conteúdo. Mas javascript:; é mais curto e faz a mesma coisa.

Seria melhor usar o jQuery,

$(document).ready(function() {
    $("a").css("cursor", "pointer");
});

e omitir ambos href="#" e href="javascript:void(0)" .

A marca de âncora será como

<a onclick="hello()">Hello</a>

Simples o suficiente!

Se você estiver usando AngularJS , você pode usar o seguinte:

<a href="">Do some fancy JavaScript</a>

Que não fará nada.

além do que, além do mais

• Não te levará ao topo da página, como acontece com (#)
  • Portanto, você não precisa retornar explicitamente falsecom JavaScript
• É curto e conciso

Normalmente, você sempre deve ter um link alternativo para garantir que os clientes com JavaScript desativado ainda tenham alguma funcionalidade. Esse conceito é chamado de JavaScript não intrusivo.

Exemplo ... Digamos que você tenha o seguinte link de pesquisa:

<a href="search.php" id="searchLink">Search</a>

Você sempre pode fazer o seguinte:

var link = document.getElementById('searchLink');

link.onclick = function() {
    try {
        // Do Stuff Here        
    } finally {
        return false;
    }
};

Dessa forma, as pessoas com JavaScript desativado são direcionadas para search.phpenquanto seus visualizadores com JavaScript exibem sua funcionalidade aprimorada.

Dependendo do que você quer realizar, você pode esquecer o onclick e usar o href:

<a href="javascript:myJsFunc()">Link Text</a>

Contorna a necessidade de retornar falso. Eu não gosto da #opção porque, como mencionado, levará o usuário para o topo da página. Se você tiver outro lugar para enviar o usuário, se ele não estiver com o JavaScript habilitado (o que é raro no local onde trabalho, mas é uma boa ideia), o método proposto por Steve funciona muito bem.

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

Por último, você pode usar javascript:void(0)se não quiser que ninguém vá a qualquer lugar e se não quiser chamar uma função JavaScript. Ele funciona muito bem se você tiver uma imagem na qual deseja que um evento de mouseover aconteça, mas não há nada para o usuário clicar.

Eu acredito que você está apresentando uma falsa dicotomia. Estas não são as únicas duas opções.

Eu concordo com o Sr. D4V360 que sugeriu que, mesmo que você esteja usando a tag âncora, você não tem uma âncora aqui. Tudo o que você tem é uma seção especial de um documento que deve se comportar de maneira um pouco diferente. Uma <span>tag é muito mais apropriada.

Eu diria que a melhor maneira é fazer uma referência href a um ID que você nunca usaria, como # Do1Not2Use3This4Id5 ou um ID semelhante, que você tem 100% de certeza de que ninguém usará e não ofenderá as pessoas.

1. Javascript:void(0)é uma má idéia e viola a Política de Segurança de Conteúdo em páginas HTTPS habilitadas por CSP https://developer.mozilla.org/en/docs/Security/CSP (graças a @ jakub.g)
2. Usando apenas #fará com que o usuário pule de volta ao topo quando pressionado
3. Não estragar a página se o JavaScript não estiver ativado (a menos que você tenha código de detecção de JavaScript
4. Se o JavaScript estiver ativado, você poderá desativar o evento padrão
5. Você tem que usar href a menos que você saiba como impedir que seu navegador selecione algum texto, (não sei se usar 4 removerá a coisa que impede o navegador de selecionar texto)

Basicamente, ninguém mencionou 5 neste artigo, o que eu acho importante, já que o seu site é considerado pouco profissional se, de repente, ele começar a selecionar coisas no link.