javascript:void(0) to wyrażenie JavaScript, które zawsze zwraca undefined i nic nie robi – najczęściej jest używane w atrybucie href linków, aby zablokować domyślne działanie odsyłacza (przejście lub przeładowanie strony).
- 1. Co oznacza void(0) w JavaScript?
- 2. javascript:void(0) w linkach HTML
- 3. Po co w ogóle używa się javascript:void(0)?
- 4. Porównanie: javascript:void(0) vs # vs brak href
- 5. Kiedy javascript:void(0) powoduje problemy?
- 6. Nowocześniejsze i lepsze alternatywy
- 7. Kiedy javascript:void(0) jest realnie akceptowalne?
- 8. Instrukcja: jak naprawić istniejące javascript:void(0) w projekcie
- 9. Przykłady „przed i po”
1. Co oznacza void(0) w JavaScript?
1.1. Operator void – definicja
W JavaScript operator void wykonuje wyrażenie po swojej prawej stronie, a następnie zawsze zwraca undefined, niezależnie od wartości argumentu.
Przykłady działania operatora void:
void 0; // zwraca undefined
void (123); // też zwraca undefined
void (alert('Hej')); // pokaże alert, ale wynik całego wyrażenia to undefined
0 w void(0) jest tylko placeholderem – można tam wstawić dowolne wyrażenie, wynik i tak będzie undefined.
1.2. void(0) a void 0
Oba zapisy są równoważne i zwracają undefined. W praktyce w HTML częściej spotkasz zapis javascript:void(0):
void(0)
void 0
2. javascript:void(0) w linkach HTML
Najczęstszy kontekst użycia wygląda tak:
<a href="javascript:void(0)">Kliknij mnie</a>
Jak zachowa się taki link po kliknięciu:
- nadal wygląda jak link (kursor „rączka”, domyślny styl
<a>), - po kliknięciu nie przechodzi do nowej strony,
- nie przeładowuje bieżącej strony,
- wyrażenie
void(0)jest wykonane, ale nie zwraca żadnej wartości – dla przeglądarki to „nic nie rób”.
Przykład w akcji:
<a href="javascript:void(0)" onclick="openModal()">Otwórz okno</a>
Kliknięcie wywoła funkcję openModal(), a dzięki javascript:void(0) przeglądarka nie zmieni adresu i nie przeładuje strony.
3. Po co w ogóle używa się javascript:void(0)?
Kluczowy powód: chcemy zachować wygląd linku, ale zablokować jego domyślne działanie nawigacyjne.
Typowe zastosowania
Najczęściej spotkasz je w poniższych scenariuszach:
- tworzenie „linków”, które działają jak przyciski i tylko wywołują JavaScript,
- elementy interfejsu w aplikacjach SPA, gdzie nie chcemy przeładowywać strony,
- „martwe” linki w menu, które rozwijają podmenu zamiast przechodzić gdzieś dalej.
Przykład użycia w menu:
<a href="javascript:void(0)" onclick="toggleMenu()">Menu</a>
Po kliknięciu wykona się toggleMenu(), ale link nie przeniesie użytkownika i nie odświeży strony.
4. Porównanie: javascript:void(0) vs # vs brak href
To częsty dylemat frontendowców. Porównanie wariantów wygląda tak:
| Wariant | Efekt po kliknięciu | Plusy | Minusy |
|---|---|---|---|
href="javascript:void(0)" |
brak nawigacji, brak przeładowania strony | pełny wygląd linku, brak „skoku” strony | stary styl, problemy z dostępnością/SEO, trudniejsze testowanie |
href="#" |
przewinięcie strony do góry (początek dokumentu) | prosty zapis | niechciane „skoki” strony, męczące w dłuższych widokach |
brak href |
element nie jest prawdziwym linkiem | brak domyślnej nawigacji | kursor jak tekst, brak semantyki <a> (gorsza dostępność, SEO) |
współczesny wzorzec: <button> |
brak nawigacji, domyślne zachowanie przycisku | semantycznie poprawne dla akcji, łatwe JS | wymaga stylowania, jeśli ma wyglądać jak link |
W starszym kodzie javascript:void(0) bywało „lepsze niż #”, bo nie powoduje przewinięcia strony do góry.
5. Kiedy javascript:void(0) powoduje problemy?
5.1. Gdy jedyne działanie zależy od JavaScript
Przykład linku zależnego wyłącznie od JS:
<a href="javascript:void(0)" onclick="submitForm();">Wyślij</a>
Najczęstsze problemy to:
- jeśli skrypt się nie załaduje (błąd, AdBlock, CSP), link nie zrobi nic,
- użytkownik bez JavaScriptu zostaje z „martwym” odnośnikiem,
- dla robotów/SEO to nie jest prawdziwy URL.
Lepszy wariant progresywny wygląda tak:
<a href="/kontakt" onclick="submitForm(); return false;">Wyślij</a>
Bez JS użytkownik przejdzie na stronę kontaktu (fallback), a z JS formularz zostanie obsłużony i return false zablokuje nawigację.
5.2. W połączeniu z błędami w JS
Przykład potencjalnie problematyczny:
<a href="javascript:void(0)" onclick="openModal()">Otwórz</a>
Jeśli openModal wyrzuci wyjątek albo nie istnieje, nic się nie otworzy, a przeglądarka nie ma nawet do czego przejść, więc użytkownik utknie.
Jak diagnozować błędy związane z takim linkiem:
- otwórz DevTools (
F12lubCtrl+Shift+I), - sprawdź zakładkę Console – czy nie ma błędów JS,
- upewnij się, że odpowiednie pliki JS rzeczywiście się ładują (zakładka Network).
5.3. Problemy z dostępnością (a11y)
javascript:void(0) w href może mylić technologie asystujące:
- zachowuje się jak link, ale nie ma realnego celu,
- dla czytników ekranu to mylące: element jest anonsowany jako „link”, a niczego nie otwiera,
- akcje typu „otwórz menu” powinny być semantycznie przyciskiem (
<button>), nie „pustym” linkiem.
Lepsza wersja kontrolki rozwijającej menu:
<button type="button" onclick="toggleMenu()">Rozwiń menu</button>
W razie potrzeby dodaj odpowiednie atrybuty ARIA (np. aria-expanded).
5.4. Bezpieczeństwo i Content Security Policy (CSP)
W nowoczesnych aplikacjach często stosuje się CSP, które blokuje schemat javascript: w href jako potencjalnie niebezpieczny (XSS).
W takich konfiguracjach poniższy zapis może zostać zablokowany lub oznaczony jako naruszenie polityki bezpieczeństwa:
<a href="javascript:void(0)">...</a>
6. Nowocześniejsze i lepsze alternatywy
Rekomendowany sposób blokowania domyślnego działania linku to nasłuchiwanie zdarzeń i event.preventDefault().
6.1. Podejście z addEventListener
HTML linku z prawdziwym adresem:
<a href="/jakas-strona" id="openModalLink">Otwórz modal</a>
JavaScript obsługujący kliknięcie:
document
.getElementById('openModalLink')
.addEventListener('click', function (event) {
event.preventDefault(); // blokuje przejście pod /jakas-strona
openModal();
});
Zalety takiego podejścia:
- HTML pozostaje semantyczny (prawdziwy adres w
href), - bez JS użytkownik nadal ma gdzie przejść,
- logika jest w JS, nie w atrybutach HTML,
- brak schematu
javascript:whref(zgodne z CSP, czytelniejsze).
6.2. Podejście z onclick i return false
Jeśli chcesz użyć atrybutu onclick, zastosuj taki wariant:
<a href="/jakas-strona" onclick="openModal(); return false;">Otwórz modal</a>
return false wykona funkcję i zablokuje domyślną akcję linku (zachowuje się jak preventDefault() i często też stopPropagation()).
To wciąż lepsze niż href="javascript:void(0)", bo link ma normalny URL (fallback), a w href nie używasz schematu javascript:.
7. Kiedy javascript:void(0) jest realnie akceptowalne?
W nowym kodzie zazwyczaj warto go unikać. W starszych projektach (np. z jQuery i inline JS) zobaczysz go często i nie zawsze opłaca się natychmiastowa refaktoryzacja całego modułu.
W szybkich prototypach lub narzędziach wewnętrznych, gdy nie masz wymagań SEO/a11y i świadomie akceptujesz zależność od JS, możesz użyć tego skrótu.
Przykład świadomie „prowizoryczny”:
<a href="javascript:void(0)" onclick="showDebugInfo()">DEBUG</a>
Do produkcyjnych serwisów publicznych lepiej stosować alternatywy z sekcji 6.
8. Instrukcja: jak naprawić istniejące javascript:void(0) w projekcie
Załóżmy, że masz w kodzie wiele takich odnośników:
<a href="javascript:void(0)" onclick="doSomething()">Zrób coś</a>
Krok 1 – znajdź wszystkie wystąpienia
Wyszukaj w projekcie frazę javascript:void(0), zwłaszcza w szablonach HTML (np. JSP, Twig, Blade), gdzie najczęściej się ukrywa.
Krok 2 – zdecyduj, czy to powinien być link, czy przycisk
Jeśli element nawiguje do innej strony, zostaw <a>. Jeśli wykonuje akcję na bieżącej stronie (otwiera modal, rozwija menu, wysyła formularz), powinien być <button>.
a) Jeśli to przycisk – zmień na <button>
Było tak:
<a href="javascript:void(0)" onclick="toggleMenu()">Menu</a>
Zrób tak:
<button type="button" onclick="toggleMenu()">Menu</button>
Jeśli potrzebujesz, wystyluj przycisk jak link w CSS:
button {
background: none;
border: none;
padding: 0;
color: #06c;
text-decoration: underline;
cursor: pointer;
}
b) Jeśli to link z akcją JS – dodaj prawdziwy href i blokuj go w JS
Było tak:
<a href="javascript:void(0)" onclick="openModal()">Regulamin</a>
Zrób tak (HTML):
<a href="/regulamin" id="openRegulamin">Regulamin</a>
Zrób tak (JavaScript):
document
.getElementById('openRegulamin')
.addEventListener('click', function (event) {
event.preventDefault(); // zatrzymaj przejście
openModal(); // pokaż w modalu
});
Dzięki temu bez JS użytkownik trafi na /regulamin, a z JS zobaczy modal.
Krok 3 – usuń schemat javascript: z href
Jeśli mimo wszystko musisz zostać przy <a> bez realnego celu, rozważ:
- zamiast
javascript:void(0)użyjhref="#"+event.preventDefault(), - albo
href=""+event.preventDefault(), - choć wciąż lepiej użyć
<button>dla czystej akcji.
9. Przykłady „przed i po”
9.1. Link otwierający modal (stary styl → lepsze wzorce)
Stary kod:
<!-- STARY KOD -->
<a href="javascript:void(0)" onclick="openLoginModal()">Zaloguj</a>
Lepszy kod (minimum):
<!-- LEPSZY KOD (minimum) -->
<a href="/logowanie" onclick="openLoginModal(); return false;">Zaloguj</a>
Lepszy kod (separacja logiki):
<!-- LEPSZY KOD (separacja logiki) -->
<a href="/logowanie" id="loginLink">Zaloguj</a>
<script>
document.getElementById('loginLink').addEventListener('click', function (event) {
event.preventDefault();
openLoginModal();
});
</script>
9.2. Element interfejsu, który tylko rozwija panel
Stary kod:
<!-- STARY KOD -->
<a href="javascript:void(0)" onclick="toggleSidebar()">Menu</a>
Nowoczesny kod:
<!-- NOWOCZESNY KOD -->
<button type="button" id="sidebarToggle">Menu</button>
<script>
document.getElementById('sidebarToggle').addEventListener('click', function () {
toggleSidebar();
});
</script>
