Co oznacza "javascript: void(0)"?

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

Nie ma dobrego powodu, aby używać javascript: pseudo-URL (*). W praktyce spowoduje to zamieszanie lub błędy, jeśli ktoś spróbuje takich rzeczy jak "link do zakładki", "otwórz link w nowej karcie" i tak dalej. Dzieje się to dość często, teraz ludzie przyzwyczaili się do środkowego kliknięcia na nową kartę: wygląda to jak link, chcesz go przeczytać 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.

<a href="#"> jest powszechną alternatywą, która może być prawdopodobnie mniej zła. Należy jednak pamiętać, aby return false z obsługi zdarzenia onclick, Aby zapobiec śledzeniu łącza i przewijaniu go do góry strony.

W niektórych przypadkach może być rzeczywiście przydatne miejsce, aby wskazać link. Na przykład, jeśli masz kontrolkę, którą możesz kliknąć, która otwiera wcześniej ukrytą <div id="foo">, rozsądne jest użycie <a href="#foo"> do linkowania do niej. Lub jeśli istnieje inny niż JavaScript sposób robienia tego samego (na przykład 'thispage.php?show= foo', który ustawia Foo visible na początek), możesz do tego linkować.

W przeciwnym razie, jeśli link wskazuje tylko na jakiś skrypt, to tak naprawdę nie jest on linkiem i nie powinien być oznaczony jako taki. Zwyczajowym podejściem byłoby dodanie onclick do <span>, <div>, lub <a> bez href i styl go w jakiś sposób, aby było jasne, że można go kliknąć. Tak robił StackOverflow [w momencie pisania tego tekstu; teraz to używa href="#"].

Wadą tego jest to, że tracisz kontrolę nad klawiaturą, ponieważ nie możesz zakładek na span / div / bare-a lub aktywować go spacją. To, czy jest to wada, zależy od tego, jakiego rodzaju działania element ma podjąć. Można, z pewnym wysiłkiem, próbować naśladować interakcję klawiatury, dodając tabIndex do elementu i nasłuchując klawiszy spacji. Ale to nigdy nie będzie w 100% odtworzyć prawdziwe zachowanie przeglądarki, nie tylko dlatego, że różne przeglądarki mogą inaczej reagować na klawiaturę (nie wspominając o przeglądarkach niewizualnych).

Jeśli naprawdę chcesz element, który nie jest łączem, ale który można aktywować normalnie za pomocą myszy lub klawiatury, to co chcesz to <button type="button"> (lub <input type="button"> jest tak samo dobre, dla prostej treści tekstowej). Zawsze możesz użyć CSS, aby go zmienić, aby wyglądał bardziej jak link niż przycisk, jeśli chcesz. Ale ponieważ zachowuje się jak przycisk, tak naprawdę powinieneś go oznaczyć.

( * : in site w każdym razie autorstwo. Oczywiście są one przydatne dla bookmarklets. javascript: pseudo-adresy URL są pojęciową dziwacznością: lokalizatorem, który nie wskazuje na lokalizację, ale zamiast tego wywołuje aktywny kod wewnątrz bieżącej lokalizacji. Spowodowały one ogromne problemy z bezpieczeństwem zarówno dla przeglądarek, jak i webapps i nigdy nie powinny być wymyślone przez Netscape.)

To znaczy, że nic nie da. Jest to próba, aby link nie "nawigował" nigdzie. Ale to nie jest właściwa droga.

Powinieneś po prostu return false w zdarzeniu onclick, tak:

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

Zazwyczaj jest używany, jeśli link robi coś "JavaScript-y". Jak zamieszczenie formularza AJAX, Zamiana obrazu, czy cokolwiek innego. W takim przypadku po prostu wykonaj dowolną funkcję, która zostanie wywołana return false.

Aby Twoja strona była całkowicie niesamowita, jednak ogólnie będziesz Dołącz link, który wykonuje tę samą akcję, jeśli osoba go przeglądająca nie zdecyduje się na uruchomienie JavaScript.

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

Istnieje ogromna różnica w zachowaniu " # " vs javascript: void

"# " przewija Cię na górę strony podczas gdy "javascript:void(0);" nie.

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

Jest bardzo popularnie używany do dodawania funkcji JavaScript do linku HTML, na przykład: link [Print], który widzisz na wielu stronach internetowych. Kod jest podobny:

<a href="javascript:void(0)" onclick="call print function">Print</a>

Dlaczego potrzebujemy 'href' podczas gdy 'onclick' sami możemy wykonać zadanie? Ponieważ jeśli pominiemy 'href', gdy użytkownicy najadą myszką na tekst "Print", kursor zmieni się na "I". Mając 'href' pozwolić kursorowi wyświetlać się tak, jakby był to hiperłącze: wskazująca dłoń.

PS: są dwie metody: 1. href="javascript:void(0);" i 2. href="#" - oba mają takie same efekt. Ale pierwszy wymaga włączania JavaScript w przeglądarce internetowej, podczas gdy drugi nie. Więc drugi wydaje się być bardziej kompatybilny.

Zawsze powinieneś mieć href na swoich tagach a . Wywołanie funkcji JavaScript, która zwraca "undefined", wystarczy. Tak samo linkowanie do'#'.

Znaczniki Anchor w Internet Explorerze 6 bez href nie mają zastosowanego stylu a:hover.

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

void jest operatorem, który zwraca wartość undefined, aby przeglądarka nie mogła załadować nowej strony.

Przeglądarki internetowe spróbują pobrać cokolwiek jest używane jako adres URL i załadować go, chyba że jest to funkcja JavaScript, która zwraca null. Na przykład, jeśli klikniemy link taki jak ten:

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

Wtedy pojawi się komunikat alertu bez ładowania nowej strony, a to dlatego, że {[4] } jest funkcją zwracającą wartość null. Oznacza to, że gdy przeglądarka próbuje załadować nowy strona widzi null i nie ma nic do załadowania.

Ważną rzeczą, którą należy pamiętać o operatorze void, jest to, że wymaga on wartości i nie może być użyty sam. Powinniśmy używać go w ten sposób:

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

Operator void oblicza podane wyrażenie i zwraca undefined. Unika odświeżania strony.

Warto wspomnieć, że czasami zobaczysz void 0 podczas sprawdzania undefined, po prostu dlatego, że wymaga mniej znaków.

Na przykład:

something === undefined

Vs.

something === void 0

Niektóre metody minifikacji zastępują undefined przez void 0 z tego powodu.

Użycie javascript:void(0) oznacza, że autor HTML nadużywa elementu kotwicy zamiast elementu przycisku.

Znaczniki Anchor są często nadużywane w przypadku onclick, aby utworzyć pseudo-przyciski ustawiając href na " # " lub " javascript: void (0)" Na zapobiegaj odświeżaniu strony. Wartości te powodują nieoczekiwane zachowanie podczas kopiowania / przeciągania linków, otwierania linków w nowym karty / okna, zakładki i gdy JavaScript jest nadal pobierany, błędy się, lub jest wyłączony. To również przekazuje niepoprawną semantykę do technologie wspomagające (np. czytniki ekranu). W takich przypadkach jest to zaleca się zamiast tego użycie <button>. Ogólnie należy używać tylko anchor do nawigacji przy użyciu odpowiedniego adresu URL.

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

Aby zrozumieć to pojęcie należy najpierw zrozumieć operator void w JavaScript.

Składnia operatora void to: void «expr», który ocenia expr i zwraca undefined.

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

function myVoid(expr) {
    return undefined;
}

Ten operator void ma jedno ważne użycie, którym jest odrzucenie wyniku wyrażenia.

W niektórych sytuacjach ważne jest zwrócenie undefined w przeciwieństwie do wyniku wyrażenia. Wtedy void może należy użyć do odrzucenia tego wyniku. Jedna z takich sytuacji dotyczy adresów URL javascript:, których należy unikać w przypadku linków, ale są one przydatne w bookmarkletach. Podczas odwiedzania jednego z tych adresów URL wiele przeglądarek zastępuje bieżący dokument wynikiem oceny "zawartoś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/")

Link musi mieć określony cel HREF, aby mógł być użytecznym obiektem wyświetlania.

Większość przeglądarek nie będzie analizować Zaawansowanego JavaScript w

<A HREF="" 

Tag taki jak:

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

Ponieważ znacznik HREF w większości przeglądarek nie pozwala na stosowanie białych znaków lub konwertuje białe znaki na %20, co czyni JavaScript absolutnie bezużytecznym dla interpretera.

Więc jeśli chcesz użyć znacznika a HREF do wykonania Inline JavaScript, możesz musi najpierw podać poprawną wartość HREF, która nie jest zbyt złożona( nie zawiera białych znaków), a następnie podać JavaScript w znaczniku atrybutu zdarzenia, takim jak OnClick, OnMouseOver, OnMouseOut, itp.

Typową odpowiedzią jest zrobienie czegoś takiego:

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

To działa dobrze, ale sprawia, że strona przeskakuje na górę ze względu na znak pound/hash tag mówi, aby to zrobić.

Po prostu podanie znaku pound / znacznika hash w znaczniku a HREF faktycznie określa kotwicę główną, która jest zawsze, domyślnie na górze strony, można określić inną lokalizację, używając określenia atrybutu NAME wewnątrz znacznika a HREF.

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

Możesz zmienić swój znacznik a HREF, aby przejść do 'middleofpage' i wykonać JavaScript w zdarzeniu OnClick, gdy to się stanie w następujący sposób:

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

Będzie wiele razy, gdy nie chcesz, aby ten link skakał, więc możesz zrobić dwie rzeczy:

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

Teraz zniknie po kliknięciu, ale może to spowodować, że strona ponownie wyśrodkuj się z aktualnego widoku. To nie jest ładne. Jaki jest najlepszy sposób, aby zapewnić javascript in-line, za pomocą HREF, ale bez konieczności robienia żadnego z powyższych? JavaScript: void (0);

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

To mówi przeglądarce, aby nigdzie nie poszła, ale zamiast tego wykonaj poprawną funkcję JavaScript:void(0); najpierw w tagu HREF, ponieważ nie zawiera ona białych znaków i nie będzie przetwarzana jako adres URL. Zamiast tego będzie uruchamiany przez kompilator. VOID to słowo kluczowe, które po dostarczeniu z perametrem of 0 zwraca UNDEFINED, który nie używa więcej zasobów do obsługi zwracanej wartości, która wystąpiłaby bez podania 0 (jest bardziej przyjazna dla zarządzania pamięcią/wydajności).

Następną rzeczą, która się wydarzy, jest to, że OnClick zostanie wykonany. Strona się nie porusza, nic się nie dzieje.

JavaScript: pomijanie adresów URL; tutaj void może być przydatny 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
}

Web developerzy używają javascript:void(0), ponieważ jest to najprostszy sposób, aby zapobiec domyślnemu zachowaniu znacznika a. void(*anything*) zwraca {[3] } i jest to wartość falsy. zwracanie fałszywej wartości jest podobne do return false w zdarzeniu onclick znacznika a, które zapobiega jego domyślnemu zachowaniu.

Myślę więc, że javascript:void(0) jest najprostszym sposobem zapobiegania domyślnemu zachowaniu znacznika a.

Inny przykład gdzie jest używany javascript.void(0) . Nie jestem pewien, czy jest to poprawny sposób, ale czy zadanie

$(document).ready(function() {
  jQuery(".show-hide-detail").hide();
  jQuery(".show-hide-detail:first").show();
  jQuery(".show-hide-btn a").click(function() {
    var thid_data = jQuery(this).attr('data-id');
    jQuery(".show-hide-btn a").removeClass('active');
    jQuery(this).addClass('active');
    if (!jQuery("#" + thid_data).is(":visible")) {
      jQuery(".show-hide-detail").hide();
      jQuery("#" + thid_data).show();
    }
  });
});

<section>
  <div class="features">
    <div class="container">
      <h1>Room Dimensions</h1>
      <p class="description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor arcu non ligula convallis, vel tincidunt ipsum posuere.sollicitudin. Duis iaculis, arcu ut hendrerit pharetra, elit augue pulvinar magna
      </p>
      <div class="dimension-btn show-hide-btn">
        <a class="active" data-id="LivingRoom">Living Room</a>
        <a href="javascript:void(0)" data-id="DiningRoom">Dining Room</a>
        <a href="javascript:void(0)" data-id="Kitchen">Kitchen</a>
        <a href="javascript:void(0)" data-id="MasterBedroom">Master Bedroom</a>
        <a href="javascript:void(0)" data-id="Bedroom2">Bedroom 2</a>
        <a href="javascript:void(0)" data-id="Bedroom3">Bedroom 3</a>
        <a href="javascript:void(0)" data-id="Bathroom">Bathroom</a>
        <a href="javascript:void(0)" data-id="Gym">Gym</a>
        <a href="javascript:void(0)" data-id="SwimmingPool">Swimming Pool</a>
      </div>
      <div class="row">
        <div class="LivingRoom Dimension-detail show-hide-detail" id="LivingRoom" style="display: block;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="DiningRoom" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="Kitchen" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="MasterBedroom" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="Bedroom2" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="Bedroom3" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="Bathroom" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="SwimmingPool" style="display: none;"></div>
        </div>
      </div>
    </div>



</section>