via - location.href javascript




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

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

A seguir estão dois métodos de construir um link que tem o único propósito 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>


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

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

Naturalmente "#" com um manipulador onclick que impede que a ação padrão seja [muito] melhor. Além disso, um link com o único propósito de executar JavaScript não é realmente "um link", a menos que você esteja enviando o usuário para alguma âncora sensata 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 do cowgod, particularmente isso: ...href="javascript_required.html" onclick="... Essa é uma boa abordagem, mas não distingue entre os cenários" JavaScript desabilitado "e" onclick falha ".


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

O problema com essa abordagem é que, se a função não funcionar ou se houver algum problema, o link ficará desmarcado. 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 true se 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 nego o resultado da função doSomething() . Se funcionar, ele retornará true , então será negado ( false ) e o path/to/some/URL não será chamado. Se a função retornará false (por exemplo, o navegador não suporta algo usado dentro da função ou algo der errado), é negado como true e o path/to/some/URL é chamado.


Eu costumo ir para

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

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


Eu honestamente não sugeriria nenhum dos dois. Eu usaria um <button></button> estilizado 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>

Desta forma, você pode atribuir o seu onclick. Eu também sugiro ligação via script, não usando o atributo onclick na tag do elemento. A única pegadinha é o efeito de texto 3d do psuedo em IEs mais antigos que não podem ser desativados.

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

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

NOTA: Você pode substituir o 0 por uma string como javascript:void('Delete record 123') que pode servir como um indicador extra que mostrará o que o clique realmente fará.


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 uso javascript:void(0) .

Três razões. Incentivar o uso de # entre uma equipe de desenvolvedores inevitavelmente leva a alguns usando 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 o return false; final é return false; não será executado se a função chamada lançar um erro. Portanto, os desenvolvedores também devem se lembrar de lidar com qualquer erro apropriadamente na função chamada.

Uma terceira razão é que há casos em que a propriedade de evento onclick é atribuída dinamicamente. Eu prefiro poder chamar uma função ou atribuí-la dinamicamente sem ter que codificar a função especificamente para um método de anexo ou outro. Daí meu onclick (ou em qualquer coisa) na marcação HTML fica assim:

onclick="someFunc.call(this)"

OU

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

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

Então, se você é um desenvolvedor solitário, então você pode claramente fazer sua própria escolha, mas se você trabalha em equipe, você deve declarar:

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

OU

Use href="javascript:void(0)"

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


Eu uso o seguinte

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

em vez de

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

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 discretamente via JavaScript depois que o DOM fosse processado, garantindo assim que, se o JavaScript não estivesse presente / utilizado, você não o faria tenha manipuladores de eventos inúteis que misturem seu código e ofuscem potencialmente (ou pelo menos distraiam) seu conteúdo real.


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>


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


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!


# é 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.


'#' 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);


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


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 estou basicamente parafraseando a partir deste artigo prático usando aprimoramento progressivo . A resposta curta é que você nunca usa javascript:void(0);ou a #menos que sua interface de usuário já tenha inferido que o JavaScript está habilitado, caso em que 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 o SEO em seu aplicativo, como / Home / Action / Parameters, também é uma boa prática. Se você tiver um link para uma página que funcione sem o 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 completa com interface de usuário e botões de envio HTML padrão, mas parece melhor injetado em um diálogo modal com botões jQueryUI. De qualquer forma funciona, dependendo do navegador, 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>

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.


Se não houver, hreftalvez não haja razão para usar uma tag de âncora.

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

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





href