Que valor "href" devo usar para ligações JavaScript, " # "ou"javascript:void(0)"?

Eu uso javascript:void(0).

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

Mas depois esquecem-se de usar return doSomething() no onclick e apenas usam doSomething().

Uma segunda razão para evitar # é que o return false; final não será executado se a função chamada lançar um erro. Assim, os desenvolvedores também têm que se lembrar de lidar com qualquer erro apropriadamente no chamada.

Uma terceira razão é que há casos em que a propriedade de Eventos onclick é atribuída dinamicamente. Eu prefiro ser capaz de chamar uma função ou atribuí-la dinamicamente sem ter que codificar a função especificamente para um método de apego ou outro. Por isso o meu onclick (ou sobre qualquer outra coisa) na marcação HTML parece-se com isto:

onclick="someFunc.call(this)"

Ou

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

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

Use href="#", certifique-se onclick sempre contém return false; no final, que qualquer função chamada não lança um erro e se você ligar uma função dinamicamente à propriedade onclick certifique-se de que, além de não lançar um erro, ele devolve false.

Ou

Uso href="javascript:void(0)"

Nenhum dos dois.

Se você pode ter um URL real que faz sentido use isso como o HREF. O onclick não dispara se alguém clicar no meio do seu link para abrir uma nova aba ou se tiver o JavaScript desactivado.

Se isso não for possível, então você deve, pelo menos, injectar a marca de âncora no documento com JavaScript e os responsáveis por eventos apropriados.

Confira JavaScript Discreto e aprimoramento Progressivo (ambas as Taxas).

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

1. Promove a prática do JavaScript intrusivo-que se revelou difícil de manter e difícil de escalar. Mais sobre isso em JavaScript discreto.

2. Você está gastando seu tempo escrevendo um código extremamente descritivo-que tem muito pouco (se qualquer) benefício para a sua base de código.

3. Existem agora formas melhores, mais fáceis e mais viáveis e escaláveis de alcançar o resultado desejado.

O modo JavaScript discreto

Apenas não tem um atributo href de todo! Qualquer reset CSS bom cuidaria do estilo de cursor padrão em falta, de modo que não é um problema. Em seguida, anexar a sua funcionalidade JavaScript usando as melhores práticas graciosas e discretas - que são mais sustentáveis como o seu A lógica JavaScript permanece em JavaScript, em vez de em sua marcação - o que é essencial quando você começa a desenvolver aplicações JavaScript de grande escala que exigem que sua lógica seja dividida em componentes e modelos Blackbox. Mais sobre isso em Arquitectura de aplicações JavaScript em grande escala

Exemplo simples de código

// 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>

Uma caixa preta coragem.js exemplo

Notas

• Omitir o atributo href no elemento a fará com que o elemento a não ser acessível usando a navegação de chave tab. Se desejar que esses elementos sejam acessíveis através da chave tab, poderá definir o atributo tabindex, ou usar os elementos button em alternativa. Você pode facilmente Estilo elementos do botão para se parecer com links normais, como mencionado em resposta do Tracker1.

• Omitir o atributo href no elemento a fará com que Internet Explorer 6 e Internet Explorer 7 não assuma o a:hover styling, que é por isso que nós adicionamos um shim JavaScript simples para realizar isso via a.hover em vez disso. O que é perfeitamente ok, como se você não tem um atributo href e nenhuma degradação graciosa então seu link não vai funcionar de qualquer maneira - e você terá problemas maiores para se preocupar.

• Se quiser que a sua acção continue a funcionar com o JavaScript desactivado, então use um elemento a com um atributo href que vai para algum URL que irá executar a acção manualmente em vez de através de um Ajax pedido ou o que quer que seja deve ser o caminho a seguir. Se você estiver fazendo isso, então você quer garantir que você faça um event.preventDefault() em sua chamada de clique para se certificar de que quando o botão é clicado ele não segue o link. Esta opção é chamada de degradação graciosa.

'#' vai levar o usuário de volta para o topo da página, então eu costumo ir com void(0).

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

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>

Se tem de usar um elemento A, use javascript:void(0); por razões já mencionadas.

• Will intercepta sempre no caso do teu evento de onclick falhar.
• não ocorrerão chamadas de carga errantes, nem desencadearão outros acontecimentos com base numa alteração de hash
A marca hash pode causar um comportamento inesperado se o clique cair (lances onclick), evitá-lo a menos que seja um comportamento apropriado, e você quer mudar o histórico de navegação.

Nota: Pode substituir o 0 por um texto como javascript:void('Delete record 123') que pode servir como um indicador extra que irá mostrar o que o click vai servir.

O primeiro, idealmente com um link real a seguir no caso do utilizador ter o JavaScript desactivado. Certifique-se apenas de retornar false para evitar que o evento clique de disparar se o JavaScript executar.

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

Se usar Angular2, este modo funciona:

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

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

Idealmente Farias isto:

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

Ou, melhor ainda, você teria que ter a ação padrão link no HTML, e você gostaria de adicionar o evento onclick para o elemento discreto, via JavaScript depois que o DOM torna, assim garantindo que, se o JavaScript não está presente/utilizada, você não tem inútil manipuladores de eventos de peneiragem seu código e, potencialmente, ofuscando (ou pelo menos distrai da) seu conteúdo real.

Nem se me perguntares;

Se o seu "link" tem o único propósito de executar algum código JavaScript 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 ligado a ela e algum CSS básico para imitar um link. As ligações são feitas para navegação, e se o seu código JavaScript não é para navegação, não deve ser um <a> marca.

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>

Usar apenas {[[0]} faz alguns movimentos engraçados, então eu recomendaria usar #self Se você gostaria de economizar em esforços de digitação de JavaScript bla, bla,.

USO o seguinte

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

Em vez disso

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

Eu concordo com sugestões em outros lugares afirmando que você deve usar URL regular no atributo href, em seguida, chamar alguma função JavaScript em onclick. A falha é que eles automaticamente adicionam return false Depois da chamada.

O problema com esta abordagem é que se a função não funcionar ou se houver algum problema, o link se tornará inviável. O evento Onclick irá sempre retornar false, de modo que o URL normal não será chamado.

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 função doSomething(). Se funcionar, voltará true, Assim será negada (false) e o path/to/some/URL não será chamado. Se a função irá retornar false (por exemplo, o navegador não suporta algo usado dentro da função ou qualquer outra coisa corre mal), é negada a true e o path/to/some/URL é chamado.

# é 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 graciosa (no caso de o Usuário não ter JavaScript ativado...e quando é com especificações. e orçamento). Além disso, é considerado uma má forma usar atributos JavaScript e protocolo diretamente em HTML.

A menos que esteja a escrever a ligação com o JavaScript (para que saiba que está activa no navegador), deverá, idealmente, estar a fornecer uma ligação adequada para as pessoas que estão a navegar com o JavaScript desactivado e, em seguida, evitar a acção por omissão da ligação no seu controlador de eventos onclick. Desta forma, aqueles com o JavaScript activo irão executar a função e aqueles com o JavaScript desactivado irão saltar para uma página apropriada (ou localização dentro da mesma página), em vez de apenas carregar no link e não ter nada a acontecer.

Eu recomendo usar um elemento {[[0]} em vez disso, especialmente se o controlo é suposto produzir uma alteração nos dados. (Algo como um POST.)

Definitivamente hash (#) é melhor porque em JavaScript é um pseudoscheme:

1. polui a história
2. inicia uma nova cópia do motor
Tem alcance global e não respeita o sistema de eventos.

Claro que " # " com um manipulador de onclick que impede a acção por omissão é [muito] melhor. Além disso, um link que tem o único propósito de executar JavaScript não é realmente "um link" a menos que você esteja enviando o Usuário para alguma âncora sensível na página (apenas # irá enviar para o topo) quando algo corre mal. Você pode simplesmente simular olhar e sentir o link com a stylesheet e esquecer sobre href em tudo.

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 "JavaScript desactivado" e "onclick falha" cenários.

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

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

Eu usaria:

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

Fundamentos:

Isto faz com que o href simples, os motores de busca precisam dele. Se você usar qualquer outra coisa (como uma string), ela pode causar um erro 404 not found. Quando o rato paira sobre o link, não mostra que é um guião.
1. usando return false;, a página não salta para o topo nem quebra o botão back.

Eu escolho o uso javascript:void(0), porque usar isto pode impedir o botão direito para abrir o menu Conteúdo. Mas javascript:; é mais curto e faz a mesma coisa.

Então, quando você está fazendo algum JavaScript coisas com um <a /> tag e se você colocar href="#" bem, você pode adicionar return false no final do evento (no caso de embutidos ligação do evento) como:

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

ou pode alterar o atributo href com o JavaScript como:

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

Ou

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

Você pode simplesmente usar um <button /> em vez de fazer coisas ou qualquer outro elemento como b, span ou o que quer que se encaixe lá, de acordo com a sua necessidade, porque você está autorizado a adicionar eventos em todos os elementos.

Então, existe um benefício para usar <a href="#">. Você obtém o cursor por omissão nesse elemento quando o fizer a href="#". Por isso, acho que tu ... pode usar CSS para isto como cursor:pointer; o que resolve este problema também.

E no final, se estiver a ligar o evento do código JavaScript em si, aí poderá fazer event.preventDefault() para o conseguir se estiver a usar a marca <a>, mas se não estiver a usar uma marca <a> para isto, aí terá uma vantagem, não terá de fazer isto.

Seria melhor usar jQuery,

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

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

A marca da âncora será como

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

Não use links com o único propósito de executar JavaScript.

O uso de href= " # " scrolls the page to the top; the use of void(0) creates navigational problems within the browser.

Em vez disso, utilize um elemento que não seja uma ligação:

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

E estilo com CSS:

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

Se por acaso estiver a utilizar Angularjsname, pode utilizar o seguinte:

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

Além disso

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

Se não houver {[[0]} talvez não haja razão para usar uma marca de âncora.

Pode anexar eventos (carregue, passe, etc.) em quase todos os elementos, então por que não usar apenas um spanou um div?

E para os utilizadores com o JavaScript desactivado: se não houver uma alternativa (por exemplo, uma alternativa href), eles não devem, pelo menos, ser capazes de ver e interagir com esse elemento, seja qual for a marca <a> ou <span>.

Normalmente, você deve sempre ter um link de retorno para se certificar de que os clientes com JavaScript desativado ainda tem alguma funcionalidade. Este conceito é chamado de JavaScript discreto.

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

Podes sempre fazer o seguinte:

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

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

Assim, as pessoas com JavaScript desactivado são direcionadas para {[[2]} enquanto os seus telespectadores com JavaScript vêem a sua funcionalidade melhorada.

Tentei ambos no google chrome com as ferramentas de desenvolvimento, e o {[[0]} levou 0,32 segundos. Enquanto o método javascript:void(0) demorou apenas 0,18 segundos. Assim, no google chrome, javascript:void(0) funciona melhor e mais rápido.

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

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

Por último, pode utilizar javascript:void(0) Se não quer que qualquer um vá a qualquer lugar e se você não quiser chamar uma função JavaScript. Ele funciona muito bem se você tem uma imagem que você quer um evento mouseover para acontecer com, mas não há nada para o usuário clicar em.

Então, em 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>

Eu não gosto de usar etiquetas de Hash a menos que elas sejam usadas para âncoras, e eu só faço o acima quando eu tenho mais de dois faux-links, caso contrário eu vou com javascript:void(0).

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

Estou basicamente a parafrasear este artigo prático usando o aperfeiçoamento progressivo . a resposta curta é que você nunca usa javascript:void(0); ou # a menos que a sua interface de utilizador já tenha inferido que o JavaScript está activo, caso em que deverá usar javascript:void(0);. Além disso, não use span como links, uma vez que isso é semanticamente falso para começar.

Usar SEO rotas URL amigáveis na sua aplicação, tais como/Home/Action / Parameters, também é uma boa prática. Se você tem um link para uma página que funciona sem JavaScript primeiro, você pode melhorar a experiência depois. Use um link real para uma página de trabalho, em seguida, adicionar um evento onlick para melhorar a apresentação.

<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>

1. Javascript:void(0) é uma má ideia e viola a Política de segurança dos conteúdos nas páginas HTTPS activadas pelo PSC https://developer.mozilla.org/en/docs/Security/CSP (graças a @jakub.g)
2. Se usar apenas #, o Utilizador irá saltar de volta para o topo quando carregar em {[[9]} Não vai estragar a página se O JavaScript não está activo (a menos que tenha o código de detecção JavaScript
3. Se o JavaScript estiver activo, poderá desactivar o evento por omissão
4. tem de usar o href a menos que saiba como impedir o seu navegador de seleccionar algum texto, (não sei se a utilização do 4 irá remover a coisa que impede o navegador de seleccionar o texto)