Podczepić JavaScript pod link lub przycisk można na wiele sposobów.

Sposób żałośnie-tragiczny

Pseudo-protokół javascript powstał dla bookmarkletów (skryptozakładek), które pełniły rolę rozszerzeń w epoce przedfirefoksowej.

<a href="javascript:costam()">o mamo! nie umiem javy ni hatemla!</a>
<a href="javascript:void(0)" onclick="costam()">to będę bezmyślnie kopiować</a>

W ten oto sposób odcina się drogę wszelkim robotom indeksującym strony, a także irytuje użytkowników otwierających strony w nowym oknie/tabie — oni dostaną piękne, puste strony i odwdzięczą się równie piękną wiązanką “życzeń”.

Sposób kiepsko-marnawy

<a href="#" onclick="javascript:costam()">no bo u mnie działało</a>

Efekt podobnie nieefektowny, jak w poprzednim rozwiązaniu, tylko wielokrotne ładowanie tej samej strony w nowych oknach wydłuży czas, zanim odwiedzający się zirytuje.

Ponadto “javascript:” w onclick jest absolutną bzdurą. Tak nie definiuje się typu skryptu. Ta konstrukcja działa tylko dzięki przypadkowej zbieżności ze składnią etykiet wyrażeń. onclick="hublabubla:costam()" ma takie samo, bzdurne, znaczenie.

Sposób mało zły

Uwaga: IE7 ma buga psującego tę funkcjonalność. Obejściem buga jest zamiana return false na return event.returnValue=false

<a href="costam.html" onclick="costam(); return false">częściej działa niż nie działa</a>

Często onclick otwiera jakiś pop-up albo powoduje przejście do następnej strony. Umieszczenie adresu strony w href przyda się na te wszystkie przypadki, kiedy onclick nie działa (tak, mamy XXI wiek i głupi onclick nie zawsze działa).
return false spowoduje, że przeglądarka po obsłużeniu onclick nie użyje href.

Sposób prawie dobry

Uwaga: IE7 ma buga psującego tę funkcjonalność. Obejściem buga jest zamiana return costam(this.href) na return event.returnValue=costam(this.href)

<a href="costam.html" onclick="return costam(this.href)">szprytne!</a>

this.href pomoże uniknąć dublowania przy pisaniu adresu. return costam() pozwoli przenieść return true/false do wnętrza funkcji i np. użyć href nawet, gdy przeglądarka ma włączony JavaScript, ale nie zadziałał (bo np. ma paranoiczny popup blocker albo wybrakowany DHTML).

Sposób dobry

<a href="costam.html" class="costam">cool!</a>

Gdzie skrypt? Ha! Tak samo, jak CSS, przerzuca się do oddzielnego pliku i “zaczepia” za pomocą (m.in) klas; podobnie można robić ze skryptami.

Realizuje się to za pomocą kodu, który przeszuka wszystkie linki w dokumencie i przypisze im odpowiednie funkcje.

Działa w IE5-7

var linki = document.getElementsByTagName('a');
for(i=0; i < linki.length; i++)
{
if (linki[i].className=='costam')
linki[i].onclick = costam;  // nazwa funkcji bez ()!
/* można też użyć: linki[i].onlick = function() {return costam(para,metry);} */
}

Powyższy kod musi być wykonany, gdy do dokumentu załadują się już wszystkie linki, dlatego ten skrypt należy dołączyć na samym końcu <body> (albo umieścić w funkcji, która zostanie wywołana przy onload dokumentu).

To jest tylko schemat kodu. Jeśli szukasz gotowca, zobacz żywy przykład poprawnego otwierania okien pop-up ze zdjęciami.

Wyszukiwanie i obrabianie elementów dokumentu można sobie uprościć bibliotekami jak jquery, prototype lub przez zrozumienie tajemnicy event bubbling.

A gdy nie da się wymyślić sensownego href?

Gdy “link” ma pełnić funkcję, która bez JavaScript i tak nie ma sensu (np. pokazywanie DHTMLowych elementów, które bez JS są zawsze widoczne), to powinno się użyć <button>, który powstał specjalnie na ten wypadek:

atrybut type jest potrzebny tylko dla kIEpskiego

<button onclick="costam()" type=button>clickerty click</button>

Ale <button> czasem broni się przed perfekcyjnym ostylowaniem, wtedy można wykorzystać, że onclick może działać na dowolnym elemencie i zamiast zepsutego linku użyć np.:

<span tabindex="0" style="cursor:poitnter">

(tabindex to hack, żeby w różnych przeglądarkach był dostępny z klawiatury, a stylami można dodać “łapkę”).

Onclick i formularze

Do wysyłania formularzy nie używaj onclick na polach <input>, ani <a>. Tylko stare babcie klikają myszą na przyciski, a reszta używa klawisza enter i może pominąć wszelkie tego typu wynalazki.

Submit()owa wpadka

Jeśli nie wiesz, czy dobrze używasz formularzy, to poszukaj “submit()” — jeśli masz go w kodzie, to źle używasz formularzy. Do sprawdzania poprawności fomularzy służy zdarzenie onsubmit elementu <form>. Wystarczy zwrócić false, żeby przerwać wysyłanie formularza.

<form onsubmit="return sprawdz_formularz(this)">

Wynik formularza w nowym oknie

Nie potrzeba Javascript. Wystarczy atrybut target elementu <form>, ale to i tak nienajlepszy pomysł.

Przyciski jak linki

Po pierwsze, przycisk wysyłający formularz nie powinien wyglądać jak link. Coś, co wygląda jak link, oznacza przejście do nowej strony bez żadnych efektów ubocznych. Przyciski są od wykonywania operacji.

Jeśli standardowy przycisk nie pasuje do wyglądu strony, to możesz zrobić własny za pomocą obrazka:

<input type="image" src="przycisk.png" alt="wyślij">

Jeśli już natrafiasz na bardzo rzadki przypadek, kiedy trzeba przemycić dane przy pozornie niewinnym przejściu do innej strony (i bynajmniej nie ma to być zastępstwem dla cookies), to “link” wysyłający formularz można zrobić poprzez nadanie stylów CSS:

<input type="submit" style="color:blue; background:transparent; border:0">

(Idealnym rozwiązaniem byłby element <button>, ale Internet Explorer go obsługuje tak żałośnie, że lepiej sobie darować).