JavaScript i Anchor Tags, najlepsze praktyki?

Question

Szybkie pytanie.

Czy powinniśmy umieścić Javascript w HREF lub użyć onClick (event)?

Czy są jakieś plusy/minusy do korzystania z jednego z nich? Osobiście myślę, że to łatwiejsze/sprzątaczka po prostu umieścić kod w href i nie trzeba return false lub martwić skoki do #

Czy istnieją jakieś szczególne problemy znane z przeglądarek każdej metody ...

Przykłady:

<a href="javascript: alert('foo!');">Click Me</a> 
<a href="#" onClick="alert('foo!');return false">Click Me</a> 
<a href="javascript:void(0)" onclick="alert('foo!');">Click Me</a> 

Answer 1

1) raczej używać onclick. Upewnij się, że masz racjonalny adres URL zastępczy w href, gdy JS jest niedozwolony.

2) Zamiast numeru onclick="..." należy użyć funkcji obsługi zdarzeń. Znajdź elementy, używając jQuery lub XPath, a następnie dla każdego, zadzwoń pod numer element.addEventListener().

element.addEventListener("click", function() { alert("bar"); }, false); 

Albo stary sposób ...

element.onclick = function() { alert("foo"); }; 

Answer 2

W zdarzeniu onclick (chociaż przypisano JS zamiast atrybutu) z sensownym atrybutem href. Build on things that work

Answer 3

Generalnie chciałbym uzewnętrznić JavaScript jednak użyć href to nazwać:

<a href="javascript:foo('bar!');">Click Me</a>

Chociaż myślę skrócony alert przykładem jest w porządku jako wyjątek od reguły.

Jednakże, jeśli przy użyciu biblioteki JS jak jQuery można oczywiście przypisać zdarzenia bezpośrednio - zobacz pierwszy przykład w tutorialu jQuery, który wygląda na elemencie zakotwiczenia http://docs.jquery.com/Tutorials:How_jQuery_Works

Answer 4

Utrzymywanie kod oddzielone od html jest czystsze IMO.

<a id="foo" href="#">Click Me</a> 

Wtedy w głowie lub oddzielnym pliku JS:

document.getElementByID("foo").onclick = function() { alert("hi"); } 

Answer 5

nie będę osobiście umieścić kodu JavaScript w kodzie HTML. Powinieneś użyć detektora zdarzeń, który zostanie wyzwolony po kliknięciu na <a>.

<a href="#" id="linkA">Click Me</a> 

A potem:

document.getElementById('linkA').addEventListener('click', function(e){ 
    e.preventDefault(); // Prevents page from scrolling to the top 
    alert('foo!'); 
});