Devo lasciare href vuoto durante l'implementazione degli eventi click tramite jQuery?

4

È preferibile avere # nell'attributo href di un link quando sto implementando l'evento click tramite jQuery o è ok lasciare href vuoto?

cioè.

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

vs

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

Quando sto facendo

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

Anche se capisco che l'evento click possa essere su una span o su un altro elemento di questo tipo, mi interessa in questo caso le best practice particolari quando utilizzo un tag a .

    
posta dreza 29.11.2012 - 01:49
fonte

3 risposte

12

I link con un attributo href vuoto sono validi, come spiegato in 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.

Non è davvero un problema abbastanza significativo per essere qualcosa di più delle preferenze personali. Personalmente, andrei con una terza opzione:

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

... dove <url> è l'url della mia richiesta Ajax. Ovviamente questo introduce un passaggio in jQuery:

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

   // do ajaxy stuff
});

... ma trovo che sia un po 'più pratico rispetto all'URL di codifica in Javascript, ha senso semanticamente (controllando il codice un paio di anni dopo averlo scritto, l'url lo sarà se prima lo cercherete) probabilmente). È anche un bel trucco se hai dei semplicistici collegamenti ajax-y che fanno più o meno la stessa cosa. Considera questo esempio:

<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);
    });
});
    
risposta data 29.11.2012 - 02:13
fonte
4

Non penso che farà la differenza per la maggior parte del tempo. Se non esiste un collegamento reale, potresti anche considerare l'utilizzo di un'estensione anziché di un tag.

Ho visto qualcosa di simile:

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

Vedi questa pagina per esempi: link

Inoltre, sarebbe una buona idea eseguire l'html attraverso un validatore per verificare eventuali potenziali problemi.

    
risposta data 29.11.2012 - 02:12
fonte
3

La risposta di Yannis è buona, ma non so ancora perché qualcuno dovrebbe usare < un href ... > tag per eventi a tutti. Puoi utilizzare praticamente tutti i tag che puoi inserire in un ID per gli eventi, rimuovendo quindi l'intera discussione "legale" o "href=" o utilizzando il codice per impedire che venga seguito il collegamento.

D'altra parte, se si tratta di un collegamento, utilizzare < a href="..." >

    
risposta data 30.11.2012 - 19:43
fonte

Leggi altre domande sui tag