Qual valor "href" devo usar para links JavaScript, "#" ou "javascript: void (0)"?

A seguir, são apresentados dois métodos para criar um link com o único objetivo de executar o código JavaScript. Qual é melhor, em termos de funcionalidade, velocidade de carregamento da página, finalidades de validação etc.?

function myJsFunc() {
    alert("myJsFunc");
}

<a href="#" onclick="myJsFunc();">Run JavaScript Code</a>

ou

function myJsFunc() {
    alert("myJsFunc");
}

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

Eu uso javascript:void(0).

Três razões Incentivar o uso de #uma equipe de desenvolvedores inevitavelmente leva alguns a usar o valor de retorno da função chamada assim:

function doSomething() {
    //Some code
    return false;
}

Mas então eles esquecem de usar return doSomething()no onclick e apenas usam doSomething().

Uma segunda razão para evitar #é que a final return false;não será executada se a função chamada gerar um erro. Portanto, os desenvolvedores também precisam se lembrar de manipular qualquer erro adequadamente na função chamada.

Um terceiro motivo é que há casos em que a onclickpropriedade do evento é atribuída dinamicamente. Prefiro poder chamar uma função ou atribuí-la dinamicamente sem precisar codificar a função especificamente para um método de anexo ou outro. Portanto, minha onclick(ou qualquer coisa) na marcação HTML fica assim:

onclick="someFunc.call(this)"

OU

onclick="someFunc.apply(this, arguments)"

O uso javascript:void(0)evita todas as dores de cabeça acima e não encontrei nenhum exemplo de desvantagem.

Portanto, se você é um desenvolvedor independente, pode claramente fazer sua própria escolha, mas se trabalhar em equipe, precisará declarar:

Use href="#", verifique se onclicksempre contém return false;no final, que qualquer função chamada não gera um erro e se você anexar uma função dinamicamente à onclickpropriedade, certifique-se de que, além de não gerar um erro, ela retorne false.

OU

Usar href="javascript:void(0)"

O segundo é claramente muito mais fácil de se comunicar.

Nem.

Se você puder ter um URL real que faça sentido, use-o como HREF. O onclick não será acionado se alguém clicar com o botão do meio no seu link para abrir uma nova guia ou se o JavaScript estiver desativado.

Se isso não for possível, você deve pelo menos injetar a tag anchor no documento com JavaScript e os manipuladores de eventos de clique apropriados.

Sei que isso nem sempre é possível, mas, na minha opinião, deve ser buscado no desenvolvimento de qualquer site público.

Confira JavaScript discreto e aprimoramento progressivo (ambos Wikipedia).

Fazer <a href="#" onclick="myJsFunc();">Link</a>ou <a href="javascript:void(0)" onclick="myJsFunc();">Link</a>qualquer outra coisa que contenha um onclickatributo - era bom há cinco anos, embora agora possa ser uma má prática. Aqui está o porquê:

1. Ele promove a prática de JavaScript invasivo - que se mostrou difícil de manter e difícil de dimensionar. Mais sobre isso em JavaScript discreto .

2. Você está gastando seu tempo escrevendo código incrivelmente detalhado - o que tem muito pouco (se houver) benefício para sua base de código.

3. Agora existem maneiras melhores, mais fáceis e mais sustentáveis ​​e escaláveis ​​de alcançar o resultado desejado.

A maneira discreta de JavaScript

Só não tem um hrefatributo! Qualquer boa redefinição de CSS cuidaria do estilo de cursor padrão ausente, o que é um problema. Em seguida, anexe sua funcionalidade JavaScript usando práticas recomendadas discretas e discretas - que são mais fáceis de manter à medida que sua lógica JavaScript permanece em JavaScript, em vez de em sua marcação - o que é essencial quando você começa a desenvolver aplicativos JavaScript em larga escala que exigem que sua lógica seja dividida em componentes e modelos na caixa preta. Mais sobre isso em arquitetura de aplicativos JavaScript em larga escala

Exemplo de código simples

// Cancel click event
$('.cancel-action').click(function(){
    alert('Cancel action occurs!');
});

// Hover shim for Internet Explorer 6 and Internet Explorer 7.
$(document.body).on('hover','a',function(){
    $(this).toggleClass('hover');
});

a { cursor: pointer; color: blue; }
a:hover,a.hover { text-decoration: underline; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cancel-action">Cancel this action</a>

Um exemplo de Backbone.js em caixa preta

Para obter um exemplo de componente escalável, em caixa preta, Backbone.js - consulte este exemplo de trabalho do jsfiddle aqui . Observe como utilizamos práticas discretas de JavaScript e, em uma pequena quantidade de código, temos um componente que pode ser repetido na página várias vezes sem efeitos colaterais ou conflitos entre as diferentes instâncias do componente. Surpreendente!

Notas

• A omissão do hrefatributo no aelemento fará com que o elemento não seja acessível usando a tabnavegação por teclas. Se você deseja que esses elementos sejam acessíveis por meio da tabchave, você pode definir o tabindexatributo ou usar buttonelementos. Você pode estilizar facilmente os elementos do botão para se parecer com links normais, conforme mencionado na resposta do Tracker1 .

• A omissão do hrefatributo no aelemento fará com que o Internet Explorer 6 e o Internet Explorer 7 não assumam o a:hoverestilo, motivo pelo qual adicionamos um shim simples de JavaScript para fazer isso via a.hover. O que é perfeitamente aceitável, como se você não tivesse um atributo href e nenhuma degradação normal, seu link não funcionaria de qualquer maneira - e você terá problemas maiores com que se preocupar.

• Se você deseja que sua ação ainda funcione com o JavaScript desativado, use um aelemento com um hrefatributo que vá para algum URL que executará a ação manualmente, em vez de através de uma solicitação do Ajax ou qualquer outro caminho a seguir. Se você estiver fazendo isso, certifique-se de fazer uma event.preventDefault()chamada de clique para garantir que, quando o botão for clicado, ele não siga o link. Essa opção é chamada de degradação normal.

'#'levará o usuário de volta ao topo da página, então eu costumo segui-lo void(0).

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

Eu sinceramente sugeriria nenhum. Eu usaria um estilizado <button></button>para esse comportamento.

button.link {
  display: inline-block;
  position: relative;
  background-color: transparent;
  cursor: pointer;
  border: 0;
  padding: 0;
  color: #00f;
  text-decoration: underline;
  font: inherit;
}

<p>A button that looks like a <button type="button" class="link">link</button>.</p>

Dessa forma, você pode atribuir seu onclick. Sugiro também a ligação via script, não usando o onclickatributo na tag do elemento. O único problema é o efeito de texto 3d psuedo em IEs mais antigos que não podem ser desativados.

Se você DEVE usar um elemento A, use javascript:void(0);pelos motivos já mencionados.

• Sempre interceptará caso seu evento onclick falhe.
• Não haverá chamadas de carregamento erradas ou acionará outros eventos com base em uma alteração de hash
• A tag hash pode causar comportamento inesperado se o clique cair (acionamento de um clique), evitá-lo, a menos que seja um comportamento fall-through apropriado e você desejar alterar o histórico de navegação.

OBSERVAÇÃO: você pode substituir 0por uma sequência como a javascript:void('Delete record 123')que pode servir como um indicador extra que mostrará o que o clique realmente fará.

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

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

Se você usa o Angular2, funciona dessa maneira:

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

Consulte aqui https://stackoverflow.com/a/45465728/2803344

Nem se você me perguntar;

Se o seu "link" tem o único objetivo de executar algum código JavaScript, ele não se qualifica como um link; um pedaço de texto com uma função JavaScript acoplada a ele. Eu recomendaria usar uma <span>tag com um onclick handleranexo e algum CSS básico para imitar um link. Os links são criados para navegação e, se o seu código JavaScript não for para navegação, não deve ser uma <a>tag.

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>

Idealmente, você faria isso:

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

Ou, melhor ainda, você teria o link de ação padrão no HTML e adicionaria o evento onclick ao elemento sem obstrução via JavaScript após a renderização do DOM, garantindo assim que, se o JavaScript não estiver presente / utilizado, você não tenha manipuladores de eventos inúteis adivinhando seu código e potencialmente ofuscar (ou pelo menos distrair) seu conteúdo real.

Usando apenas #faz alguns movimentos engraçados, então eu recomendaria usar #selfse você gostaria de economizar nos esforços de digitação JavaScript bla, bla,.

Eu uso o seguinte

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

em vez de

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

Concordo com sugestões em outros lugares, afirmando que você deve usar URL regular no hrefatributo e chamar alguma função JavaScript no onclick. A falha é que eles adicionam automaticamente return falseapós a chamada.

O problema dessa abordagem é que, se a função não funcionar ou se houver algum problema, o link se tornará impossível de clicar. O evento Onclick sempre retornará false, portanto o URL normal não será chamado.

Existe uma solução muito simples. Deixe a função retornar truese funcionar corretamente. Em seguida, use o valor retornado para determinar se o clique deve ser cancelado ou não:

Javascript

function doSomething() {
    alert( 'you clicked on the link' );
    return true;
}

HTML

<a href="path/to/some/url" onclick="return !doSomething();">link text</a>

Note que eu nego o resultado da doSomething()função. Se funcionar, ele retornará true, portanto será negado ( false) e path/to/some/URLnão será chamado. Se a função retornar false(por exemplo, o navegador não suportar algo usado dentro da função ou se algo der errado), ela será negada truee path/to/some/URLserá chamada.

#é 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 degradar normalmente (caso o usuário não tenha o JavaScript ativado ... e quando esteja com especificações e orçamento). Além disso, é considerado incorreto usar atributos e protocolo JavaScript diretamente em HTML.

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

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

A menos que você esteja escrevendo o link usando JavaScript (para saber que ele está ativado no navegador), idealmente, você deve fornecer um link adequado para as pessoas que estão navegando com o JavaScript desabilitado e impedir a ação padrão do link no seu onclick manipulador de eventos. Dessa forma, aqueles com JavaScript ativado executarão a função e aqueles com JavaScript desativado irão para uma página apropriada (ou local dentro da mesma página), em vez de apenas clicar no link e não acontecer nada.

Definitivamente o hash ( #) é melhor porque no JavaScript é um pseudo-esquema:

1. polui a história
2. instancia uma nova cópia do mecanismo
3. é executado no escopo global e não respeita o sistema de eventos.

É claro que "#" com um manipulador onclick que impede que a ação padrão seja [muito] melhor. Além disso, um link com o único objetivo de executar JavaScript não é realmente "um link", a menos que você esteja enviando o usuário para uma âncora sensível na página (apenas # será enviado para o topo) quando algo der errado. Você pode simplesmente simular a aparência do link com a folha de estilo e esquecer o href.

Além disso, em relação à sugestão de cowgod, particularmente esta: ...href="javascript_required.html" onclick="...Esta é uma boa abordagem, mas não distingue entre os cenários "JavaScript desabilitado" e "falha ao clicar no onclick".

Eu costumo ir

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

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

Eu usaria:

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

Razões:

1. Isso torna os hrefmecanismos de pesquisa simples, necessários. Se você usar qualquer outra coisa (como uma string), isso poderá causar um 404 not founderro.
2. Quando o mouse passa o mouse sobre o link, ele não mostra que é um script.
3. Ao usar return false;, a página não pula para o topo ou quebra o backbotão.

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

Portanto, quando você faz algumas coisas em JavaScript com uma <a />tag e, se colocar href="#", também pode adicionar return false no final do evento (no caso de ligação de evento inline) como:

<a href="#" onclick="myJsFunc(); return false;">Run JavaScript Code</a>

Ou você pode alterar o atributo href com JavaScript, como:

<a href="javascript://" onclick="myJsFunc();">Run JavaScript Code</a>

ou

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

Mas semanticamente, todas as formas acima para conseguir isso estão erradas (embora funcione bem) . Se algum elemento não for criado para navegar na página e tiver algumas coisas JavaScript associadas, ele não deverá ser um<a> tag.

Você pode simplesmente usar a <button />para fazer coisas ou qualquer outro elemento, como b, span ou o que for mais adequado, conforme sua necessidade, porque você pode adicionar eventos em todos os elementos.

Portanto, há um benefício a ser usado <a href="#">. Você obtém o ponteiro do cursor por padrão nesse elemento quando obtém a href="#". Por isso, acho que você pode usar CSS para isso comocursor:pointer; que resolve esse problema também.

E, no final, se você estiver vinculando o evento a partir do próprio código JavaScript, poderá fazê event.preventDefault()-lo se estiver usando a <a>tag, mas se não estiver usando um<a> tag para isso, obterá uma vantagem, você não Não preciso fazer isso.

Então, se você vê, é melhor não usar uma tag para esse tipo de coisa.

Não use links com o único objetivo de executar o JavaScript.

O uso de href = "#" rola a página para o topo; o uso de void (0) cria problemas de navegação no navegador.

Em vez disso, use um elemento que não seja um link:

<span onclick="myJsFunc()" class="funcActuator">myJsFunc</span>

E estilize-o com CSS:

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

Seria melhor usar jQuery,

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

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

A marcação da marca âncora será como

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

Simples o suficiente!

Se você estiver usando o AngularJS , poderá usar o seguinte:

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

O que não fará nada.

além do que, além do mais

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

Se não houver, hreftalvez não haja motivo para usar uma marca de âncora.

Você pode anexar eventos (clique, passar o mouse etc.) em quase todos os elementos. Por que não usar apenas a spanou a div?

E para usuários com JavaScript desativado: se não houver um substituto (por exemplo, uma alternativa href), eles devem pelo menos não conseguir ver e interagir com esse elemento, seja ele <a>uma <span>marca ou uma tag.

Normalmente, você sempre deve ter um link de retorno para garantir que os clientes com JavaScript desativado ainda tenham alguma funcionalidade. Esse conceito é chamado JavaScript discreto.

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 desabilitado são direcionadas search.phpenquanto seus visualizadores com JavaScript visualizam sua funcionalidade aprimorada.

Eu pessoalmente os uso em combinação. Por exemplo:

HTML

<a href="#">Link</a>

com um pouco de jQuery

$('a[href="#"]').attr('href','javascript:void(0);');

ou

$('a[href="#"]').click(function(e) {
   e.preventDefault();
});

Mas estou usando isso apenas para impedir que a página pule para o topo quando o usuário clica em uma âncora vazia. Eu raramente estou usando onClick e outroson eventos diretamente em HTML.

Minha sugestão seria usar o <span>elemento com o classatributo em vez de uma âncora. Por exemplo:

<span class="link">Link</span>

Em seguida, atribua a função a .linkum script envolto no corpo e imediatamente antes da </body>tag ou em um documento JavaScript externo.

<script>
    (function($) {
        $('.link').click(function() {
            // do something
        });
    })(jQuery);
</script>

* Nota: Para elementos criados dinamicamente, use:

$('.link').on('click', function() {
    // do something
});

E para elementos criados dinamicamente, criados com elementos criados dinamicamente, use:

$(document).on('click','.link', function() {
    // do something
});

Em seguida, você pode estilizar o elemento span para parecer uma âncora com um pouco de CSS:

.link {
    color: #0000ee;
    text-decoration: underline;
    cursor: pointer;
}
.link:active {
    color: red;
}

Aqui está um exemplo do jsFiddle acima mencionado.

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

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

Isso evita a necessidade de retornar false. Não gosto da #opção porque, como mencionado, levará o usuário ao topo da página. Se você tiver algum outro lugar para enviar ao usuário, se ele não tiver o JavaScript ativado (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 fim, você pode usar javascript:void(0)se não deseja que ninguém vá a lugar algum e se não deseja chamar uma função JavaScript. Funciona muito bem se você tem uma imagem na qual deseja que um evento de mouseover aconteça, mas não há nada para o usuário clicar.

Quando tenho vários links falsos, prefiro dar a eles uma classe de 'sem link'.

Em seguida, no jQuery, adiciono o seguinte código:

$(function(){
   $('.no-link').click(function(e){
       e.preventDefault();
   });
});

E para o HTML, o link é simplesmente

<a href="/" class="no-link">Faux-Link</a>

Não gosto de usar tags hash, a menos que sejam usadas para âncoras, e só faço o acima quando tenho mais de dois links falsos, caso contrário, uso o javascript: void (0).

<a href="javascript:void(0)" class="no-link">Faux-Link</a>

Normalmente, eu gosto de evitar o uso de um link e apenas enrolar algo em um intervalo e usá-lo como uma maneira de ativar algum código JavaScript, como um pop-up ou uma revelação de conteúdo.

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

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

Eu tentei tanto no google chrome com as ferramentas de desenvolvedor, e id="#"demorou 0,32 segundos. Enquanto o javascript:void(0)método levou apenas 0,18 segundos. Portanto, no google chrome, javascript:void(0)funciona melhor e mais rápido.

Estou basicamente parafraseando este artigo prático usando aprimoramento progressivo . A resposta curta é que você nunca usa javascript:void(0);ou a #menos que sua interface com o usuário já tenha inferido que o JavaScript está ativado. Nesse caso, você deve usarjavascript:void(0); . Além disso, não use span como links, pois isso é semanticamente falso para começar.

Usar rotas de URL amigáveis ​​para SEO em seu aplicativo, como / Home / Ação / Parâmetros, também é uma boa prática. Se você tiver um link para uma página que funcione sem JavaScript primeiro, poderá aprimorar a experiência posteriormente. Use um link real para uma página de trabalho e adicione um evento onlick para aprimorar a apresentação.

Aqui está uma amostra. Home / ChangePicture é um link de trabalho para um formulário em uma página completo com interface do usuário e botões de envio de HTML padrão, mas parece melhor injetado em uma caixa de diálogo modal com os botões jQueryUI. De qualquer maneira, dependendo do navegador, o que satisfaz o primeiro desenvolvimento móvel.

<p><a href="Home/ChangePicture" onclick="return ChangePicture_onClick();" title="Change Picture">Change Picture</a></p>

<script type="text/javascript">
    function ChangePicture_onClick() {
        $.get('Home/ChangePicture',
              function (htmlResult) {
                  $("#ModalViewDiv").remove(); //Prevent duplicate dialogs
                  $("#modalContainer").append(htmlResult);
                  $("#ModalViewDiv").dialog({
                      width: 400,
                      modal: true,
                      buttons: {
                          "Upload": function () {
                              if(!ValidateUpload()) return false;
                              $("#ModalViewDiv").find("form").submit();
                          },
                          Cancel: function () { $(this).dialog("close"); }
                      },
                      close: function () { }
                  });
              }
        );
        return false;
    }
</script>