Co oznacza „javascript: void (0)”?


1378
<a href="javascript:void(0)" id="loginlink">login</a>

Widziałem hrefwiele razy, ale nie wiem, co to dokładnie znaczy.


12
javascript:jest jednym z wielu schematów URI: en.wikipedia.org/wiki/URI_scheme , jak data:.
Ciro Santilli 冠状 病毒 审查 六四 事件 法轮功

3
Możesz użyć tylko href="javascript:"do tego samego celu. Jak stwierdzono w odpowiedzi na to pytanie , void(0)część pierwotnie była przeznaczona dla wczesnych wersji przeglądarek, w których javascript:obsługa URI była inna. Ale teraz nie mogłem nawet znaleźć wersji, w której skrót nie działałby, przynajmniej IE7 obsługuje to poprawnie.
użytkownik

1
Widziałem także href = "javascript: //", czy to jest lepsze?
miecz świetlny

href = "javascript: //" nie działa dla mnie void (0) działa idealnie.
sandip

Odpowiedzi:


1040

voidOperatora ocenia danego wyrażenia, a następnie powraca undefined.

voidOperator często używane tylko w celu uzyskania undefinedwartości pierwotnych, zwykle przy użyciu „ void(0)” (który oznacza „ void 0”). W takich przypadkach undefined można zamiast tego użyć zmiennej globalnej (zakładając, że nie przypisano jej wartości innej niż domyślna).

Wyjaśnienie znajduje się tutaj: voidoperator .

Powodem, dla którego chcesz to zrobić za hrefpomocą linku, jest to, że normalnie javascript:adres URL przekieruje przeglądarkę do wersji tekstowej wyniku oceny tego JavaScript. Ale jeśli wynik jest taki undefined, przeglądarka pozostaje na tej samej stronie. void(0)to tylko krótki i prosty skrypt, który ocenia undefined.


9
co to znaczy, gdy href otrzymuje „niezdefiniowaną pierwotną wartość”?
omg

7
„zwykle javascript: url przekieruje przeglądarkę do wersji tekstowej wyniku oceny tego javascript.” Czy możesz podać tutaj przykład? Nigdy nie widziałem takiego użycia.
omg

87
Przykładem feniksa jest <a href="javascript: dosomething();"> ZRÓB TO TERAZ! </a>. Jeśli dosometthing zwróci false, wówczas kliknięcie linku spowoduje po prostu, że przeglądarka opuści stronę i wyświetli „false”. Jednak ... <a href="javascript: dosomething(); void(0)"> ZRÓB TO TERAZ! </a> pozwala uniknąć problemu. Śmiało i wklej javascript: 1 + 1; w pasku adresu przeglądarki. Przeglądarka powinna wyświetlać „2”
Breton

9
Ponieważ void jest jednoargumentowym operatorem. Pustka nie jest wartością ani funkcją. Potrzebuje wartości, aby działać po jej prawej stronie, w przeciwnym razie zgłosi błąd.
Breton

14
spróbuj poszukać w konsoli błędów? Na pewno zgłasza błąd składniowy. To jest nieprawidłowy javascript. Douglas Crockford zaleca trzymanie się z daleka od pustki, ponieważ jednoznaczne pomylenie operatora / funkcji / wartości jest zbyt kosztowne, aby sobie z tym poradzić.
Breton

435

Oprócz odpowiedzi technicznej javascript:voidoznacza to, że autor robi to źle.

Nie ma dobrego powodu, aby używać javascript:pseudo-URL (*). W praktyce spowoduje zamieszanie lub błędy, jeśli ktoś spróbuje czegoś takiego jak „link do zakładki”, „otwórz link w nowej karcie” i tak dalej. Zdarza się to dość często, gdy ludzie przyzwyczaili się już do klikania środkowym kliknięciem nowej karty: wygląda jak link, chcesz przeczytać go w nowej karcie, ale okazuje się, że nie jest to prawdziwy link, i daje niechciane wyniki, takie jak pusta strona lub błąd JS po kliknięciu środkowym przyciskiem.

<a href="#">jest powszechną alternatywą, która może być mniej zła. Należy jednak pamiętać o tym, aby return falseze strony onclickobsługi zdarzeń nie dopuścić do podążenia za linkiem i przewinięcia w górę strony.

W niektórych przypadkach może istnieć przydatne miejsce do wskazania linku. Na przykład, jeśli masz kontrolkę, którą możesz kliknąć, która otwiera poprzednio ukrytą <div id="foo">, sensowne jest użycie <a href="#foo">linku do niej. Lub jeśli istnieje sposób wykonania tej samej czynności w języku innym niż JavaScript (na przykład „thispage.php? Show = foo”, który ustawia foo na początku), możesz utworzyć link do tego.

W przeciwnym razie, jeśli link wskazuje tylko na jakiś skrypt, tak naprawdę nie jest to link i nie powinien być oznaczony jako taki. Zazwyczaj podejście byłoby dodać onclickdo <span>, <div>, albo <a>bez przeprowadzenia hrefi projektować je w jakiś sposób, aby go wyczyścić można kliknąć na nim. To właśnie StackOverflow [zrobił w momencie pisania; teraz używa href="#"].

Wadą tego jest to, że tracisz kontrolę nad klawiaturą, ponieważ nie możesz tabulować na span / div / bare-a lub aktywować go spacją. To, czy faktycznie jest to wada, zależy od tego, jakie działanie ma podjąć dany element. Możesz z pewnym wysiłkiem naśladować interaktywność klawiatury, dodając element tabIndexdo elementu i nasłuchując naciśnięcia klawisza Space. Ale nigdy nie będzie w 100% odtwarzać prawdziwego zachowania przeglądarki, zwłaszcza dlatego, że różne przeglądarki mogą różnie reagować na klawiaturę (nie wspominając o przeglądarkach niewizualnych).

Jeśli naprawdę chcesz elementu, który nie jest łączem, ale który można normalnie aktywować za pomocą myszy lub klawiatury, to czego potrzebujesz <button type="button">(lub <input type="button">jest równie dobry, jeśli chodzi o proste treści tekstowe). Zawsze możesz użyć CSS, aby zmienić styl, aby wyglądał bardziej jak link niż przycisk, jeśli chcesz. Ale ponieważ zachowuje się jak przycisk, tak naprawdę powinieneś to zaznaczyć.

(*: w każdym razie przy tworzeniu witryny. Oczywiście są one przydatne w przypadku bookmarkletów. javascript:Pseudo-URL to pojęciowy dziwak: lokalizator, który nie wskazuje na lokalizację, ale zamiast tego wywołuje aktywny kod w bieżącej lokalizacji. problemy zarówno przeglądarek, jak i aplikacji internetowych i nigdy nie powinny być wynalezione przez Netscape.)


7
Oprócz doskonałego posta @bobince: Kilka miesięcy temu przeprowadziłem kilka badań na temat nawigowalności klawiatury hrefS w przeglądarce, w tym dziwactw i efektów ubocznych; niektórzy z was mogą uznać to za przydatne: jakub-g.github.com/accessibility/onclick
jakub.g

2
@ThinkBonobo: SO zmieniło się w pewnym momencie od 2009 roku! Zaktualizowano
Bobin

59
To jest opinia i nie odpowiada na pytanie. void(0)jest potrzebny w wielu przypadkach; „#” to włamanie, które niesie ze sobą cały szereg problemów (nie działałoby w aplikacji, którą piszę, która doprowadziła mnie do tej strony).
felwithe

12
Zgadzam się z @feltwithe. Po co zmuszać innych do „robienia tego w szczególny sposób”? W ciągu 15 lat programowania mam się przekonać, że motto „zawsze tak powinno być” nie prowadzi ludzi do bałaganu, jaki stworzyli
Steven de Salas

4
Używanie identyfikatora fragmentu jest złym pomysłem z perspektywy UX, ponieważ powoduje, że dokument przeskakuje na górę strony, chyba że preventDefaultzostanie użyty. Nie rób tego w przypadku użycia kotwicy jako przycisku na formularzu.
Josh Habdas,

124

Oznacza to, że nic nie zrobi. Jest to próba, aby łącze nie „nigdzie nawigowało”. Ale to nie jest właściwa droga.

Powinieneś tak po prostu return falsena onclickrazie, tak:

<a href="#" onclick="return false;">hello</a>

Zazwyczaj używa się go, gdy link robi coś w stylu „JavaScript-y”. Jak publikowanie formularza AJAX, zamiana obrazu lub cokolwiek innego. W takim przypadku wystarczy wykonać dowolną funkcję nazywaną return false.

Aby jednak Twoja witryna była całkowicie niesamowita, zazwyczaj zawiera link, który wykonuje tę samą czynność, jeśli osoba przeglądająca ją zdecyduje się nie uruchamiać JavaScript.

<a href="backup_page_displaying_image.aspx"
   onclick="return coolImageDisplayFunction();">hello</a>

33
no no - return false zatrzyma zachowanie domyślne, więc # nigdy się nie pojawi
Magnar

22
protokół javascript: url jest standardem defacto, a nie prawdziwym standardem. Więc href = "#" onclick = "return false;" jest zgodny ze standardami, podczas gdy href = "javascript: void (0)" nie, ponieważ nie ma oficjalnego standardu, który określałby, co należy zrobić.
Breton

10
Poza tym Douglas Crockford nie lubi pustki, więc jslint będzie narzekać. Zasadniczo, ponieważ pustka jest operatorem, a nie wartością, jest myląca jak diabli i rodzi wiele pytań, takich jak to. Lepiej całkowicie tego uniknąć. ha ha.
Breton,

4
Brandon: patrz odpowiedzi brentona. Sposób, który polecam, jest najbardziej obsługiwany i, jak powiedziałem w drugiej części mojego postu, w „właściwej” witrynie nigdy nie użyjesz „#”, ponieważ zapewnisz systemy zastępcze, aby poradzić sobie z brakiem javascript.
południe Silk

19
+1 za dołączenie całkowicie niesamowitego przykładu. Nawet jeśli nie masz statycznego efektu zastępczego HTML dla tego, co robisz w JavaScript, zawsze możesz zrobić coś takiego <a href="enableJavaScriptToSeeMyCompletelyAwesomeSite.html" onclick="completelyAwesome();return false;">.
Grant Wagner,

73

Istnieje OGROMNA różnica w zachowaniu „#” vs javascript: void

„#” przewija cię do GÓRY strony, a „javascript: void (0);” nie.

Jest to bardzo ważne, jeśli kodujesz strony dynamiczne. użytkownik nie chce wrócić do góry tylko dlatego, że kliknął link na stronie.


26
@Salvin: Zachowanie przewijania do góry strony można stłumić, wracając falsedo modułu obsługi zdarzeń: onclick="doSomething();return false;"lub, jeśli doSomething()zwraca false, możesz użyć onclick="return doSomething();".
Grant Wagner,

40
@GrantWagner - Lub 5 lat później e.preventDefault().
trysis

1
Być może zechcesz edytować / usunąć tę odpowiedź, ponieważ "#"nie jest ona przewijana do góry po zwróceniu wartości false.
Navin

4
@Navin masz rację, ale jest to obecnie przestarzała praktyka. Komentarz trysis jest teraz uważany za właściwy sposób.
Tim Seguine,

66

Jest to bardzo popularna metoda dodawania funkcji JavaScript do linków HTML.
Na przykład: [Print]linki widoczne na wielu stronach internetowych są napisane w następujący sposób:

<a href="javascript:void(0)" onclick="callPrintFunction()">Print</a>

Dlaczego potrzebujemy href, aby onclicksamemu wykonać pracę? Ponieważ gdy użytkownik hrefumieści wskaźnik myszy nad tekstem „Drukuj”, gdy nie ma , kursor zmieni się w kursor (ꕯ) zamiast wskaźnika (👆). Tylko mając hrefna atagu sprawdza go jako hiperłącze.

Alternatywą dla href="javascript:void(0);"jest użycie href="#". Ta alternatywa nie wymaga włączonego JavaScript w przeglądarce użytkownika, więc jest bardziej kompatybilna.


7
nic też nie jest przydatne, jeśli javascript jest wyłączony.
Jasen

12
Nie potrzebujesz hrefkursora wskazującego; wystarczy trochę CSS.
John Montgomery,

1
Dlaczego nie umieściłbyś funkcji JavaScript w href zamiast onclick?
Siddhartha Gandhi

2
Zgadzam się z @Sid - jeśli używasz go do uruchamiania funkcji javascript, to <a href="javascript:callPrintFunction()">jest czystszy (chociaż prawdopodobnie powinien to być buttonraczej anchor, jeśli tak naprawdę nigdzie cię nie zabierze).
DaveMongoose

href="#"może prowadzić do nieprzyjemnych niespodzianek - takich jak przerwane żądania xhr, które są wywoływane po kliknięciu tego linku. Niedawno miałem trudności z debugowaniem strony internetowej, która przerwała żądanie logowania OIDC, jeśli użytkownik znalazł się pod adresem, który nie był głównym katalogiem witryny. #href spowodował, że przeładował adres przed zakończeniem żądania xhr.
JustAMartin

44

Należy zawsze mieć na swoim href a tagów. Wywołanie funkcji JavaScript, która zwraca „niezdefiniowane”, wystarczy. Więc będzie link do „#”.

Tagi zakotwiczone w programie Internet Explorer 6 bez hrefa nie otrzymują a:hoverzastosowanego stylu.

Tak, to straszne i drobne przestępstwo przeciwko ludzkości, ale z drugiej strony Internet Explorer 6 w ogóle.

Mam nadzieję, że to pomoże.

Internet Explorer 6 jest w rzeczywistości poważnym przestępstwem przeciwko ludzkości.


25

Warto wspomnieć, że czasem podczas sprawdzania niezdefiniowanej wartości zobaczysz pustkę 0, ponieważ wymaga mniej znaków.

Na przykład:

something === undefined

vs.

something === void 0

Z tego powodu niektóre metody minimalizacji zamieniają niezdefiniowane na void 0.


10
Jednym z godnych uwagi przykładów jest TypeScript ( przykład na żywo ), który kompiluje wartości domyślne parametrów do sprawdzenia void 0. Różnica 3 znaków sumuje się szybko, gdy wiele metod używa domyślnych wartości parametrów.
John Weisz

1
„Z tego powodu niektóre metody minimalizacji zamieniają niezdefiniowane na„ nieważne ”.” Wreszcie to rozumiem! Dzięki @squall za dokładną odpowiedź.
Ahmed Mahmoud

22

Zastosowanie javascript:void(0)oznacza, że ​​autor HTML niewłaściwie używa elementu kotwicy zamiast elementu przycisku.

Znaczniki kotwicy są często nadużywane przez zdarzenie onclick do tworzenia pseudoprzycisków poprzez ustawienie href na „#” lub „javascript: void (0)”, aby zapobiec odświeżeniu strony. Wartości te powodują nieoczekiwane zachowanie podczas kopiowania / przeciągania linków, otwierania linków w nowych kartach / oknach, dodawania zakładek i gdy JavaScript nadal się pobiera, błędy się wyłączają lub są wyłączone. To także przekazuje niepoprawną semantykę technologiom pomocniczym (np. Czytnikom ekranu). W takich przypadkach zaleca się użycie <button>zamiast niego. Zasadniczo należy używać kotwicy do nawigacji przy użyciu właściwego adresu URL.

Źródło: MDN w <a>Page .


4
+1 za wywołanie semantycznego HTML na starym pytaniu ... Linki prowadzą do miejsc, przyciski robią różne rzeczy - jeśli nie chcemy, aby wyglądało jak przycisk, powinniśmy po prostu wyczyścić styl.
kevlarr

Dużym wyjątkiem byłyby mapy obrazów, które mogą wymagać wykonania JavaScript; a ponieważ nie jest to przycisk, jest to łącze o wielokątnych granicach, jest to „jedyny” sposób.

17

voidto operator używany do zwracania undefinedwartości, więc przeglądarka nie będzie mogła załadować nowej strony.

Przeglądarki internetowe podejmą próbę pobrania dowolnego adresu URL i załadowania go, chyba że jest to funkcja JavaScript zwracająca wartość null. Na przykład, jeśli klikniemy taki link:

<a href="javascript: alert('Hello World')">Click Me</a>

wtedy pojawi się komunikat ostrzegawczy bez ładowania nowej strony, a to dlatego, że alertjest to funkcja, która zwraca wartość null. Oznacza to, że gdy przeglądarka próbuje załadować nową stronę, widzi pusty i nie ma nic do załadowania.

Ważną rzeczą do zapamiętania na temat operatora void jest to, że wymaga on wartości i nie może być używany samodzielnie. Powinniśmy użyć tego w następujący sposób:

<a href="javascript: void(0)">I am a useless link</a>

1
Widziałem, jak ludzie używają javascript: null zamiast void ... ale to jest problem. Chrome null działa, w Firefox próbuje załadować stronę null. Cieszę się, że zaktualizowałeś. Ciekawy błąd.
Gavin Pickin

Znalazłem inne zastosowania w bazie kodu, takie jak javascript: null, ale z javascript: null (), która jest niezdefiniowana, więc działa.
Gavin Pickin

1
Więc w zasadzie jest to jak prevend jquery's Default and return false?
Robert Rocha

16

Aby zrozumieć tę koncepcję, należy najpierw zrozumieć operator pustki w JavaScript.

Składnia operatora void jest następująca: void «expr»która ocenia wyrażenie i zwraca niezdefiniowane.

Jeśli zaimplementujesz void jako funkcję, wygląda to następująco:

function myVoid(expr) {
    return undefined;
}

Ten operator pustki ma jedno ważne zastosowanie - odrzucanie wyniku wyrażenia.

W niektórych sytuacjach ważne jest, aby powrócić niezdefiniowany, w przeciwieństwie do wyniku wyrażenia. Następnie można użyć pustki, aby odrzucić ten wynik. Jedna z takich sytuacji dotyczy javascript: adresów URL, których należy unikać w przypadku linków, ale są one przydatne w przypadku bookmarkletów. Podczas odwiedzania jednego z tych adresów URL wiele przeglądarek zastępuje bieżący dokument wynikiem oceny „treści” adresów URL, ale tylko wtedy, gdy wynik nie jest niezdefiniowany. Dlatego jeśli chcesz otworzyć nowe okno bez zmiany aktualnie wyświetlanej zawartości, możesz wykonać następujące czynności:

javascript:void window.open("http://example.com/")

2
Dziękujemy za dokładne wyjaśnienie, po co jest argument „nieważny”! W innych odpowiedziach nie było jasne, tylko, że „pustka bierze argument”.
dbeachy1

Dobra odpowiedź, ale jeden szczegół, implementacja void będzie wyglądać tak: function myVoid(expr) { expr(); return undefined; } Zapomniałeś dodać expr ();
Juanma Menendez,

1
@Juanma Menendez: nieprawda. exprjest już oceniany po myVoid()wywołaniu ( wynik tego wyrażenia jest przekazywany jako parametr)
Udo G

@UdoG Jestem ciekawy, skąd wiesz, że mężczyźni? czy możesz wyjaśnić
Juanma Menendez

@JuanmaMenendez: wyrażenia w parametrach funkcji są zawsze oceniane przed wywołaniem samej funkcji. Niestety, nie mam pod ręką żadnego dokumentu, który by to wyjaśniał, ale spróbuj sam: function() { alert("foo"); }to poprawne wyrażenie . void(function() { alert("foo"); })zwraca undefinedi nie pokazuje alertu, podczas myVoid(function() { alert("foo"); })gdy (w twojej wersji, nie tej z Gopal Yadav ).
Udo G

14

voidOperatora ocenia danego wyrażenia, a następnie powraca niezdefiniowane. Unika odświeżania strony.


9

Programiści używają tego, javascript:void(0)ponieważ jest to najprostszy sposób, aby zapobiec domyślnemu zachowaniu atagu. void(*anything*)zwraca undefinedwartość falsy. a zwracanie wartości fałszowania jest jak return falsew onclickprzypadku atagu, który uniemożliwia jego domyślne zachowanie.

Myślę więc, że javascript:void(0)jest to najprostszy sposób, aby zapobiec domyślnemu zachowaniu atagu.


8

Łącze musi mieć określony cel HREF, aby mógł być użytecznym obiektem wyświetlanym.

Większość przeglądarek nie analizuje zaawansowanego kodu JavaScript w pliku

<A HREF="" 

tag taki jak:

<A href="JavaScript:var elem = document.getElementById('foo');" 

ponieważ znacznik HREF w większości przeglądarek nie zezwala na białe znaki lub konwertuje białe znaki na% 20, odpowiednik HEX SPACJI, co sprawia, że ​​JavaScript jest absolutnie bezużyteczny dla interpretera.

Jeśli więc chcesz użyć znacznika HREF do uruchomienia wbudowanego kodu JavaScript, musisz podać prawidłową wartość parametru HREF FIRST, który nie jest zbyt skomplikowany (nie zawiera białych znaków), a następnie podać kod JavaScript w tagu atrybutu zdarzenia, takiego jak OnClick , OnMouseOver, OnMouseOut itp.

Typową odpowiedzią jest zrobienie czegoś takiego:

<A HREF="#" onclick="var elem = document.getElementById('foo');">Get the object</a>

Działa to dobrze, ale powoduje, że strona przeskakuje na górę, ponieważ nakazuje to znak funta / hash.

Wystarczy podać znak funta / hash w tagu A HREF, tak naprawdę określa kotwicę główną, która zawsze jest domyślnie na górze strony, możesz określić inną lokalizację, określając atrybut NAME w tagu A HREF.

<A NAME='middleofpage'></A>

Następnie możesz zmienić tag A HREF, aby przejść do „middleofpage” i wykonać JavaScript w zdarzeniu OnClick, gdy tak się stanie:

<A HREF="#middleofpage" onclick="var elem = document.getElementById('foo');">Get the object</a>

Będzie WIELE WCZEŚNIE, gdy nie chcesz, aby ten link przeskakiwał, więc możesz zrobić dwie rzeczy:

<A HREF="#thislinkname" name='thislinkname' onclick="var elem = document.getElementById('foo');">Get the object</a>

Teraz kliknięcie nie zniknie, ale może spowodować, że strona ponownie wyśrodkuje się z bieżącej rzutni. To nie jest ładne. Jaki jest najlepszy sposób na dostarczenie wbudowanego javascript za pomocą A HREF, ale bez konieczności wykonywania powyższych czynności? JavaScript: void (0);

<A HREF="JavaScript:void(0);" onclick="var elem = document.getElementById('foo');">Get the object</a>

Mówi to przeglądarce, aby przejść NIGDY, ale zamiast tego wykonać prawidłowy JavaScript: void (0); działają najpierw w znaczniku HREF, ponieważ nie zawiera białych znaków i nie będzie analizowany jako adres URL. Zamiast tego zostanie uruchomiony przez kompilator. VOID jest słowem kluczowym, które po dostarczeniu z wartością 0 zwraca wartość UNDEFINED, która nie wykorzystuje już żadnych zasobów do obsługi zwracanej wartości, która wystąpiłaby bez podania wartości 0 (jest bardziej przyjazna dla zarządzania pamięcią / wydajności).

Następną rzeczą, która się dzieje, jest wykonanie OnClick. Strona się nie porusza, nic się nie dzieje na ekranie.


+1 dla wyjaśnienia wszystkich różnych sposobów kotwicą jak to mogłoby być obsługiwane. Uważam jednak, że <a>element zawsze musi gdzieś iść ; jeśli jest tylko na stronie, aby wykonać jakiś skrypt javascript, <button>należy zamiast niego użyć Używanie <button>jest bardziej semantyczne i oszczędza ci całej tej debaty na temat tego, co włamać się do kotwicy href. Edycja: wygląda na to, że odpowiedź @Ronnie Royston poniżej zawiera już ten argument.
Rabadash8820

1

JavaScript: na bok adresy URL; w tym miejscu void może być przydatne do pisania krótszego kodu.

var error1 = false,
    error2 = false,
    error3 = false;

function error1() {

  error1 = true;
}

function myFunction() {

  // You can easily return and call a function at once, if you don't care about myFunction's return value
  if (!someCondition1)
    return error1();

  // What if you want to set a value first?
  if (!someCondition2) {
    error2 = true;
    return
  }

  // Shortest way to return and set a value at once
  if (!someCondition3)
    return void(error3 = true);

  // More code goes here
}

Byłoby miło, gdyby downvoters mogli przynajmniej powiedzieć, dlaczego przegłosowali. Wiem, że nie dotyczy to pytania, ale myślę o wszystkich ludziach, którzy przychodzą tutaj z wyników wyszukiwania.
Maciej Krawczyk
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.