Co oznacza „javascript: void (0)”?

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

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

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.

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

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>

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.

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.

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.

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.

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 .

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>

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/")

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

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.

Łą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.

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
}