Login lub e-mail Hasło   

Kilka sposobów na OnClick

Odnośnik do oryginalnej publikacji: http://pornel.net/onclick
Podczepić JavaScript pod link lub przycisk można na wiele sposobów. Sposób żałośnie-tragiczny <a href="javascript:costam()">o mamo! nie umiem javy...
Wyświetlenia: 5.472 Zamieszczono 11/04/2007

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

Sposób żałośnie-tragiczny

<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

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

Najczęściej onclick otwiera jakiś pop-up albo powoduje przejście do następnej strony. Umieszczenie jej adresu 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.

Uwaga: Najnowsza aktualizacja IE7 wprowadziła bug psujący tę funkcjonalność. Obejściem buga jest zamiana return false na return event.returnValue=false

Sposób prawie dobry

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

Uwaga: Najnowsza aktualizacja IE7 wprowadziła bug psujący tę funkcjonalność. Obejściem buga jest zamiana return costam(this.href) na return event.returnValue=costam(this.href)

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.

var linki = document.getElementsByTagName('a');
for(i=0; i < linki.length; i++)
{
if (linki[i].className=='costam')
linki[i].onlick = 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.

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:

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

(atrybut type jest potrzebny tylko dla kIEpskiego)

Ale <button> czasem broni się przed perfekcyjnym ostylowaniem, wtedy można wykorzystać, że onclick może działać na dowolnym elemencie i zamiast <a> użyć np. <span tabindex="—1" 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 omija 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 nie najlepszy 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ć).

Licencja: copyleft 

Podobne artykuły


17
komentarze: 16 | wyświetlenia: 19090
17
komentarze: 11 | wyświetlenia: 2693
13
komentarze: 0 | wyświetlenia: 4364
7
komentarze: 3 | wyświetlenia: 6055
7
komentarze: 6 | wyświetlenia: 7963
5
komentarze: 0 | wyświetlenia: 1551
1
komentarze: 3 | wyświetlenia: 3162
73
komentarze: 19 | wyświetlenia: 17176
40
komentarze: 19 | wyświetlenia: 32957
18
komentarze: 11 | wyświetlenia: 9249
17
komentarze: 4 | wyświetlenia: 5773
14
komentarze: 7 | wyświetlenia: 14641
13
komentarze: 0 | wyświetlenia: 8646
 
Autor
Dodał do zasobów: Rafal Kinde
Artykuł

Powiązane tematy






Brak wiadomości


Dodaj swoją opinię
W trosce o jakość komentarzy wymagamy od użytkowników, aby zalogowali się przed dodaniem komentarza. Jeżeli nie posiadasz jeszcze swojego konta, zarejestruj się. To tylko chwila, a uzyskasz dostęp do dodatkowych możliwości!
 

© 2005-2018 grupa EIOBA. Wrocław, Polska