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




via onclick (25)

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>


Answers

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

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

Razões:

  1. Isso torna a href simples, os mecanismos de pesquisa precisam disso. Se você usar qualquer outra coisa (como uma string), isso pode causar um erro 404 not found .
  2. Quando o mouse passa sobre o link, ele não mostra que é um script.
  3. Usando return false; , a página não salta para o topo ou quebra o botão back .

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.


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

Quando eu tenho vários links falsos, eu prefiro dar a eles uma classe de 'não-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>

Eu não gosto de usar Hash-Tags a menos que eles sejam usados ​​para âncoras, e eu só faço o acima quando eu tenho mais de dois links falsos, caso contrário eu uso javascript: void (0).

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

Normalmente, gosto de evitar o uso de um link e simplesmente envolvê-lo 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.


Usando apenas # faz alguns movimentos engraçados, então eu recomendaria usar #self se você quiser economizar em esforços de digitação de JavaScript bla, bla, ,.


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


Então, quando você está fazendo algumas coisas JavaScript com uma tag <a /> e se você colocar href="#" também, você pode adicionar retorno falso 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 (funciona bem) . Se algum elemento não for criado para navegar na página e tiver algumas coisas JavaScript associadas a ela, ela não deverá ser uma tag <a> .

Você pode simplesmente usar um <button /> vez de fazer coisas ou qualquer outro elemento como b, span ou o que couber de acordo com sua necessidade, porque você tem permissão para adicionar eventos em todos os elementos.

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

E, no final, se você estiver vinculando o evento a partir do próprio código JavaScript, você poderá fazer event.preventDefault() para conseguir isso se estiver usando a tag <a> , mas se não estiver usando uma tag <a> para isso, você ganha uma vantagem, você não precisa fazer isso.

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


Eu uso o seguinte

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

em vez de

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

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.


Nem.

Se você pode ter um URL real que faz sentido, use isso como o HREF. O onclick não será acionado se alguém fizer um clique no meio do seu link para abrir uma nova guia ou se o JavaScript estiver desabilitado.

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

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

Confira o Unobtrusive JavaScript e o aprimoramento progressivo (ambos da Wikipedia).


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


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

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

Em vez disso, use um elemento diferente de um link:

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

E estilize com CSS:

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

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


Eu costumo ir para

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

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


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


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.


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>

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


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.


Fazendo <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 de volta há cinco anos, embora agora isso possa ser uma prática ruim. Aqui está o porquê:

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

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

  3. Agora existem maneiras melhores, mais fáceis e mais fáceis de manter e escalonáveis ​​de realizar o resultado desejado.

O modo JavaScript discreto

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

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 blackbox

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

Notas

  • Omitir o atributo href no elemento a fará com que o elemento não seja acessível usando a navegação por tecla tab . Se você deseja que esses elementos sejam acessíveis por meio da tecla tab , você pode definir o atributo tabindex ou usar elementos de button . Você pode facilmente estilizar elementos de botão para parecer com links normais, como mencionado na resposta do Tracker1 .

  • Omitir o atributo href no elemento a fará com que o Internet Explorer 6 e o Internet Explorer 7 não assumam o a:hover , e é por isso que adicionamos um shim simples de JavaScript para realizar isso via a.hover . O que está perfeitamente bem, como se você não tivesse um atributo href e não houvesse degradação graciosa, então seu link não funcionaria de qualquer maneira - e você terá problemas maiores para se preocupar.

  • Se você quiser que sua ação ainda funcione com JavaScript desabilitado, use a elemento com um atributo href que vá para alguma URL que executará a ação manualmente em vez de por meio de uma solicitação do Ajax ou o que deve ser o caminho a percorrer. Se você estiver fazendo isso, então você quer garantir que você faça um event.preventDefault() em sua chamada de clique para garantir que quando o botão for clicado, ele não siga o link. Esta opção é chamada de degradação graciosa.


Eu precisava de um objeto da string de consulta e detesto muito código. Pode não ser o mais robusto do universo, mas são apenas algumas linhas de código.

var q = {};
location.href.split('?')[1].split('&').forEach(function(i){
    q[i.split('=')[0]]=i.split('=')[1];
});

Uma URL como this.htm?hello=world&foo=barirá criar:

{hello:'world', foo:'bar'}




javascript html performance optimization href