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





via onclick (25)


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.

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>




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




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.




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.




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.




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.




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




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




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 .



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.




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.




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




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




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.




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



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.




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



'#' 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 gosto da solução de Ryan Phelan . Mas eu não vejo nenhum ponto de estender o jQuery para isso? Não há uso da funcionalidade do jQuery.

Por outro lado, gosto da função incorporada no Google Chrome: window.location.getParameter.

Então, por que não usar isso? Ok, outros navegadores não têm. Então vamos criar essa função se ela não existir:

if (!window.location.getParameter ) {
  window.location.getParameter = function(key) {
    function parseParams() {
        var params = {},
            e,
            a = /\+/g,  // Regex for replacing addition symbol with a space
            r = /([^&=]+)=?([^&]*)/g,
            d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
            q = window.location.search.substring(1);

        while (e = r.exec(q))
            params[d(e[1])] = d(e[2]);

        return params;
    }

    if (!this.queryStringParams)
        this.queryStringParams = parseParams(); 

    return this.queryStringParams[key];
  };
}

Esta função é mais ou menos de Ryan Phelan, mas é empacotada de forma diferente: nome claro e sem dependências de outras bibliotecas javascript. Mais sobre esta função no meu blog .







javascript html performance optimization href