Devo deixar a href vazia ao implementar eventos de cliques via jQuery?

4

É preferível ter # no atributo href de um link quando estou implementando o evento click via jQuery, ou não há problema em deixar href empty?

ou seja,

<a id="myLink" href="#" />

vs

<a id="myLink" href="" />

Quando estou fazendo

$("#myLink").on('click', function() {
   // do ajaxy stuff
});

Embora eu entenda que o evento de clique poderia estar em um intervalo ou em outro elemento desse tipo, estou interessado neste caso por práticas recomendadas específicas ao usar uma tag a .

    
por dreza 29.11.2012 / 01:49
fonte

3 respostas

12

Links com um atributo href vazio são válidos, conforme explicado em RFC2396 :

4.2. Same-document References

A URI reference that does not contain a URI is a reference to the current document. In other words, an empty URI reference within a document is interpreted as a reference to the start of that document, and a reference containing only a fragment identifier is a reference to the identified fragment of that document. Traversal of such a reference should not result in an additional retrieval action. However, if the URI reference occurs in a context that is always intended to result in a new request, as in the case of HTML's FORM element, then an empty URI reference represents the base URI of the current document and should be replaced by that URI when transformed into a request.

Não é realmente uma questão significativa o suficiente para ser algo mais do que uma preferência pessoal. Pessoalmente, eu iria com uma terceira opção:

<a id="myLink" href="<url>" />

... onde <url> é a url do meu pedido de ajax. Obviamente, isso introduz uma etapa no jQuery:

$("#myLink").click(function(event) {
    event.preventDefault();
   url = $(this).attr("href");

   // do ajaxy stuff
});

... mas eu acho que é um pouco mais conveniente do que codificar o url em Javascript, faz sentido semanticamente (checando seu código alguns anos depois que você o escreveu, o URL será onde você irá procurar primeiro - provavelmente). Também é um truque legal se você tiver alguns links ajax-y simplistas que fazem mais ou menos a mesma coisa. Considere este exemplo:

<a class="ajax" href="<url1>">
<a class="ajax" href="<url2>">
<a class="ajax" href="<url3>">

$("a.ajax").click(function(event) {
    event.preventDefault();
    var url = $(this).attr("href");

    $.get(url, function(data) {
        console.log(data);
    });
});
    
por 29.11.2012 / 02:13
fonte
4

Eu não acho que isso faça uma grande diferença na maior parte do tempo. Se não houver um link real, você também pode considerar usar um período em vez de uma tag.

Eu também vi algo assim:

<a id="myLink" href="javascript:void(0)" />

Veja esta página para exemplos: link

Além disso, seria uma boa ideia executar o html por meio de um validador para verificar possíveis problemas.

    
por 29.11.2012 / 02:12
fonte
3

A resposta de Yannis é boa, mas ainda não sei por que alguém precisaria usar < a href ... > tags para eventos em tudo. Você pode usar praticamente qualquer tag para a qual inserir um ID para eventos, removendo assim toda a discussão 'legal' ou empregando código para evitar que o link seja seguido.

Por outro lado, se for um link, use < a href="..." >

    
por 30.11.2012 / 19:43
fonte

Tags