Pytanie Którą wartość "href" powinienem użyć dla linków JavaScript, "#" lub "javascript: void (0)"?


Poniżej przedstawiono dwie metody budowania linku, którego jedynym celem jest uruchomienie kodu JavaScript. Co jest lepsze pod względem funkcjonalności, szybkości ładowania strony, celów sprawdzania poprawności itp.?

function myJsFunc() {
    alert("myJsFunc");
}
<a href="#" onclick="myJsFunc();">Run JavaScript Code</a>

lub

function myJsFunc() {
    alert("myJsFunc");
}
 <a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>


3677


pochodzenie


Chyba że czegoś mi brakuje, <a href="javascript:void(0)" onclick="myJsFunc();"> nie ma absolutnie żadnego sensu. Jeśli ty musi Użyj javascript: psuedo-protokół, nie potrzebujesz tego onclick również atrybut. <a href="javascript:myJsFunc();"> wszystko będzie dobrze. - Wesley Murch
@WesleyMurch - Jeśli myJsFunc() ma wartość zwracaną, twoja strona się zepsuje. jsfiddle.net/jAd9G  Nadal będziesz musiał użyć void jak na przykład: <a href="javascript:void myJsFunc();">. Ale wtedy zachowanie nadal będzie się różnić. Wywołanie linku za pośrednictwem menu kontekstowego nie wyzwala click zdarzenie. - gilly3
Dlaczego nie tylko <a href="javascript:;" onclick="myEvent()"? - 3k-
javascript:; jest o wiele szybszy w pisaniu niż javascript:void(0) - Mike Causer
Pierwsza myśl, patrząc na to: "dlaczego miałbyś użyć? <a> tag, jeśli nie chcesz otwierać innej strony za pomocą natywnej przeglądarki, a raczej uruchamiać "akcję" javascript? po prostu używając a span tag z klasą js-trigger prawdopodobnie byłoby znacznie lepiej. "A może czegoś brakuje? - Adrien Be


Odpowiedzi:


używam javascript:void(0).

Trzy powody. Zachęcanie do korzystania z # wśród zespołu programistów nieuchronnie prowadzi do niektórych z wykorzystaniem zwracanej wartości funkcji o nazwie tak:

function doSomething() {
    //Some code
    return false;
}

Ale potem zapominają używać return doSomething() w onclick i po prostu użyj doSomething().

Drugi powód unikania # jest to finał return false; nie zostanie wykonane, jeśli wywoływana funkcja zgłasza błąd. W związku z tym programiści muszą również pamiętać o odpowiednim usuwaniu błędów w wywołanej funkcji.

Trzecim powodem jest to, że są przypadki, w których onclick właściwość zdarzenia jest przypisywana dynamicznie. Wolę móc wywoływać funkcję lub przypisywać ją dynamicznie, bez konieczności kodowania funkcji specjalnie dla jednej metody przyłączania lub innej. Stąd moje onclick (lub na cokolwiek) w znacznikach HTML wygląda następująco:

onclick="someFunc.call(this)"

LUB

onclick="someFunc.apply(this, arguments)"

Za pomocą javascript:void(0) unika wszystkich powyższych bólów głowy i nie znalazłem żadnych przykładów wad.

Jeśli więc jesteś samotnym programistą, możesz jasno dokonać własnego wyboru, ale jeśli pracujesz jako zespół, musisz podać:

Posługiwać się href="#", Upewnić się onclick zawsze zawiera return false; na koniec, że każda wywoływana funkcja nie generuje błędu i jeśli dynamicznie dołączasz funkcję do onclick Właściwość upewnij się, że nie zwróci błędu false.

LUB

Posługiwać się href="javascript:void(0)"

Druga jest wyraźnie łatwiejsza do przekazania.


2009



Zawsze otwieram każdy link w nowej karcie i to jest powód, dla którego osobiście go nienawidzę, gdy ludzie używają tego href="javascript:void(0)" metoda - Timo Huovinen
Przepraszam, nie zgadzam się, dlaczego ta odpowiedź ma tak dużo przebojów? Każde użycie javascript: należy uważać za złą praktykę, natrętną i niesmaczną. - Lankymart
Następne dwie odpowiedzi są znacznie lepsze i rozsądniejsze niż ta. Również pierwsze dwa argumenty są nieprawidłowe, ponieważ event.preventDefault() jest tam dokładnie, aby zapobiec domyślnemu zachowaniu (np. przeskakiwanie na górę strony w tym przypadku) i wykonać lepszą pracę bez tego całego return false; szaleństwo. - sudee
Przewiń do 2013 roku: javascript:void(0) narusza Polityka bezpieczeństwa treści na stronach HTTPS z włączoną funkcją CSP. Jedna opcja byłaby wtedy użyć href='#' i event.preventDefault() w obsadzie, ale nie lubię tak bardzo. Być może możesz ustanowić konwencję do użycia href='#void' i upewnij się, że żaden element na stronie nie ma id="void". W ten sposób kliknięcie linku do nieistniejącej kotwicy nie spowoduje przewinięcia strony. - jakub.g
Możesz użyć "#", a następnie powiązać zdarzenie kliknięcia ze wszystkimi linkami z "#" jako href. Zostałoby to wykonane w jQuery z: $('a[href="#"]').click(function(e) { e.preventDefault ? e.preventDefault() : e.returnValue = false; }); - Nathan


Ani.

Jeśli możesz mieć rzeczywisty adres URL, który ma sens, użyj go jako HREF. Usługa onclick nie zostanie uruchomiona, jeśli ktoś kliknie link pośrednio, aby otworzyć nową kartę lub jeśli wyłączona jest obsługa JavaScript.

Jeśli nie jest to możliwe, powinieneś przynajmniej wstrzyknąć tag kotwicy do dokumentu za pomocą JavaScriptu i odpowiednich procedur obsługi zdarzeń kliknięcia.

Zdaję sobie sprawę, że nie zawsze jest to możliwe, ale moim zdaniem powinno się do tego dążyć przy tworzeniu dowolnej publicznej strony internetowej.

Sprawdzić Dyskretny JavaScript i Progresywne ulepszanie (obie Wikipedia).


1201



Czy możesz podać przykład, w jaki sposób można "wstrzyknąć znacznik kotwicy do dokumentu za pomocą JavaScriptu i odpowiednich procedur obsługi zdarzeń kliknięcia"? - user456584
Po co w ogóle wstrzykiwać znacznik kotwicy, jeśli ma służyć jedynie temu, aby element był a) kliknięty b) wyświetlić kursor "wskaźnika". Wydaje się nieistotne, aby nawet wprowadzić znacznik kotwicy w tym scenariuszu. - crush
+1 dla żadnego, ale jest ponad podejście. Faktem pozostaje użycie jednego z nich javascript: lub # są złymi praktykami i nie należy ich zachęcać. Ładne artykuły btw. - Lankymart
@crush: Nie użyłbym div ani span; szczerze mówiąc, wydaje się, że to jest właśnie to <button> został stworzony dla. Ale zgodził się: prawdopodobnie nie powinien być konkretnie <a> jeśli nie ma odpowiedniego miejsca na link. - cHao
@CHao Button jest chyba najlepszym wyborem. Przypuszczam, że głównym elementem jest to, że element HTML nie powinien być wybierany na podstawie jego domyślnego wyglądu prezentacji, ale raczej jego znaczenia dla struktury dokumentu. - crush


Robić <a href="#" onclick="myJsFunc();">Link</a> lub <a href="javascript:void(0)" onclick="myJsFunc();">Link</a> lub cokolwiek innego, co zawiera onclick atrybut - było w porządku z powrotem pięć lat temu, choć teraz może to być zła praktyka. Dlatego:

  1. Promuje praktykę natrętnego JavaScriptu, który okazał się trudny do utrzymania i trudny do skalowania. Więcej na ten temat w Dyskretny JavaScript.

  2. Poświęcasz czas na pisanie niesamowicie nazbyt gadatliwego kodu - który ma bardzo mało (jeśli w ogóle) korzyści dla twojego kodu.

  3. Istnieją teraz lepsze, łatwiejsze i łatwiejsze w utrzymaniu i skalowalne sposoby osiągnięcia pożądanego rezultatu.

Dyskretny sposób JavaScript

Po prostu nie masz href atrybut w ogóle! Każdy dobry reset CSS zajmie się brakiem domyślnego stylu kursora, więc to nie jest problem. Następnie załącz swoją funkcjonalność JavaScript za pomocą wdzięcznych i dyskretnych sprawdzonych metod - które są łatwiejsze w utrzymaniu, ponieważ twoja logika JavaScript pozostaje w JavaScript, a nie w twoim znaczniku - co jest niezbędne, gdy zaczynasz tworzyć aplikacje JavaScript o dużej skali, które wymagają podziału twojej logiki na składniki blackboxed i szablony. Więcej na ten temat w Architektura aplikacji JavaScript na dużą skalę

Prosty przykład kodu

// Cancel click event
$('.cancel-action').click(function(){
    alert('Cancel action occurs!');
});

// Hover shim for Internet Explorer 6 and Internet Explorer 7.
$(document.body).on('hover','a',function(){
    $(this).toggleClass('hover');
});
a { cursor: pointer; color: blue; }
a:hover,a.hover { text-decoration: underline; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cancel-action">Cancel this action</a>

Blackboxed Backbone.js przykład

Skalowalny przykład komponentu Blackboks, Backbone.js - zobacz ten działający przykład jsfiddle tutaj. Zwróć uwagę, w jaki sposób wykorzystujemy dyskretne praktyki JavaScript, a w niewielkiej ilości kodu znajduje się komponent, który można wielokrotnie powtarzać na stronie bez skutków ubocznych lub konfliktów między różnymi instancjami składnika. Niesamowity!

Uwagi

  • Pominąć href atrybut na a element spowoduje, że element nie będzie dostępny za pomocą tab kluczowa nawigacja. Jeśli chcesz, aby te elementy były dostępne za pośrednictwem tab klucz, możesz ustawić tabindex atrybut lub użyj button elementy zamiast tego. Możesz łatwo stylizować elementy przycisków tak, aby wyglądały jak normalne linki, jak wspomniano w Odpowiedź Tracker1.

  • Pominąć href atrybut na a element spowoduje Internet Explorer 6 i Internet Explorer 7 nie brać na siebie a:hover Stylizacja, dlatego dodaliśmy prostą podkładkę JavaScript, aby to osiągnąć a.hover zamiast. Co jest całkowicie w porządku, tak jakbyś nie miał atrybutu href i nie miał pełnej wdzięku degradacji, wtedy twój link i tak nie zadziała - a będziesz miał większe problemy, o które musisz się martwić.

  • Jeśli chcesz, aby Twoje działanie nadal działało z wyłączoną obsługą JavaScript, użyj opcji a element z href atrybut, który trafia do adresu URL, który wykona akcję ręcznie, zamiast za pośrednictwem żądania Ajax lub cokolwiek powinno być drogą do zrobienia. Jeśli to robisz, to musisz upewnić się, że robisz event.preventDefault() po kliknięciu, aby upewnić się, że kliknięcie przycisku nie powoduje wyświetlenia linku. Ta opcja nazywa się pełną wdzięku degradacją.


735



Bądź ostrożny, pozostawiając atrybuty href wyłączone, nie jest kompatybilny z przeglądarkami, a stracisz na rzeczach takich jak efekty hover w przeglądarce Internet Explorer - Thomas Davis
Zgadzam się z tą odpowiedzią, ale pojawia się kolejna kwestia, która wynika z pominięcia atrybutu href. W wielu przeglądarkach po wielokrotnym kliknięciu linku bardzo szybko zostanie wybrany tekst na stronie. Ustawienie href rozwiązuje ten konkretny problem, który nie jest łatwy do naprawienia w inny sposób. - Christopher Camps
Uwaga: styl linków button sugerowane tutaj podejście jest nękane przez nieunikniony "3d" stan aktywny w IE9 i niższy. - Brennan Roberts
Uważam, że ta odpowiedź jest przesadnie dogmatyczna. Są chwile, kiedy chcesz zastosować zachowanie JS do 1 lub 2 a href. W takim przypadku przesadą jest definiowanie dodatkowego CSS i wstrzykiwanie całej funkcji JS. W niektórych przypadkach (np. Dodawanie treści za pośrednictwem CMS) w rzeczywistości tak nie jest dozwolony wstrzyknąć nowy CSS lub samodzielny JS, a wbudowany to wszystko, co możesz zrobić. Nie widzę, jak rozwiązanie wbudowane jest mniej konserwowalne w praktyce dla 1 lub 2 prostych JS a href. Zawsze bądź podejrzliwy wobec ogólnych ogólnych stwierdzeń na temat złej praktyki, w tym tej :) - Jordan Rieger
Wszystkie te "notatki", które są trudne do rozwiązania (ustawienie tabindex wymaga kłopotów na złożonej stronie!). O wiele lepiej po prostu to zrobić javascript:void(0). To jest pragmatyczna odpowiedź i jedyna sensowna odpowiedź w realnym świecie. - Abhi Beckert


'#' przeniesie użytkownika z powrotem na górę strony, więc zwykle używam go void(0).

javascript:; także zachowuje się jak javascript:void(0);


281



Sposobem uniknięcia tego jest zwrócenie wartości false w module obsługi zdarzeń onclick. - Guvante
Zwracanie wartości false w procedurze obsługi zdarzeń nie pozwala uniknąć tego, że jeśli JavaScript JS nie działa poprawnie. - Quentin
używanie "#someNonExistantAnchorName" działa dobrze, ponieważ nie ma gdzie przeskoczyć. - scunliffe
Jeśli masz bazowy href, to # lub #something zabierze cię do tej kotwicy na bazie href stronę, zamiast na bieżącej stronie. - Abhi Beckert
The shebang (#!) robi lewę, ale zdecydowanie jest złą praktyką. - Neel


Szczerze mówiąc, nie sugerowałem. Używałbym stylizowanego <button></button> za to zachowanie.

button.link {
  display: inline-block;
  position: relative;
  background-color: transparent;
  cursor: pointer;
  border: 0;
  padding: 0;
  color: #00f;
  text-decoration: underline;
  font: inherit;
}
<p>A button that looks like a <button type="button" class="link">link</button>.</p>

W ten sposób możesz przypisać swój onclick. Sugeruję także bindowanie za pomocą skryptu, a nie używanie onclick atrybut na znaczniku elementu. Jedynym problemem jest efekt tekstowy 3d w starszych wersjach IE, który nie może być wyłączony.


Jeśli ty MUSI użyj elementu A, użyj javascript:void(0); z powodów już wspomnianych.

  • Zawsze będzie przechwytywać na wypadek niepowodzenia zdarzenia onclick.
  • Nie będzie mieć błędnych wywołań obciążenia lub wyzwalania innych zdarzeń na podstawie zmiany wartości skrótu
  • Tag skrótu może spowodować nieoczekiwane zachowanie, jeśli kliknięcie zostanie odrzucone (rzuty onclick), należy go ominąć, o ile nie jest to odpowiednie zachowanie typu fall-through, a użytkownik chce zmienić historię nawigacji.

UWAGA: Możesz zastąpić 0 z ciągiem takim jak javascript:void('Delete record 123') który może służyć jako dodatkowy wskaźnik, który pokaże, co faktycznie zrobi kliknięcie.


209



W IE8 / IE9 nie mogę usunąć przesunięcia 1px "3D" w przycisku: stan aktywny. - Brennan Roberts
@BrennanRoberts Tak, niestety, każda stylizacja przycisków jest bardziej problematyczna z IE ... Wciąż uważam, że to chyba najbardziej odpowiednie podejście, nie, że nie łamie się przy okazji moich własnych zasad. - Tracker1
Więc nie używaj <button> ale an input type=button zamiast? - Patrik Affentranger
Następnie użyj a <clickable> element. Lub <clickabletim> Jeśli wolisz. Niestety użycie niestandardowego znacznika lub zwykłego elementu div może utrudnić użytkownikom klawiatury skupienie elementu. - joeytwiddle
Ta odpowiedź powinna być na górze. Jeśli masz ten dylemat, istnieje duża szansa, że ​​potrzebujesz button. IE9 na szczęście szybko traci udziały w rynku, a aktywny efekt 1px nie powinien uniemożliwiać nam używania semantycznych znaczników. <a> jest linkiem, ma cię gdzieś wysłać, do działań, które mamy <button>. - mjsarfatti


Pierwszy, najlepiej z rzeczywistym linkiem do śledzenia w przypadku, gdy użytkownik ma wyłączoną obsługę JavaScript. Po prostu zwróć wartość false, aby zapobiec uruchomieniu zdarzenia kliknięcia, jeśli JavaScript zostanie uruchomiony.

<a href="#" onclick="myJsFunc(); return false;">Link</a>

Jeśli używasz Angular2, działa to w następujący sposób:

<a [routerLink]="" (click)="passTheSalt()">Click me</a>.

Spójrz tutaj https://stackoverflow.com/a/45465728/2803344


128



Więc w agencjach użytkownika z włączoną obsługą JavaScript i obsługiwaną funkcją uruchamia się funkcja JavaScript, cofając się (dla agentów użytkownika, gdzie JS zawodzi z jakiegokolwiek powodu) do linku do góry strony? Jest to rzadko rozsądny powrót. - Quentin
"najlepiej z prawdziwym linkiem do naśladowania w przypadku, gdy użytkownik ma wyłączoną obsługę JavaScript", powinien iść do użytecznej strony, a nie #, nawet jeśli jest to tylko wyjaśnienie, że strona potrzebuje JS do działania. co do niepowodzenia, spodziewałbym się, że deweloper użyje właściwego wykrywania funkcji przeglądarki itp. przed wdrożeniem. - Zach
Zakładam (mam nadzieję), że coś takiego mogłoby być tylko pokazywaniem popup lub czymś równie prostym. W takim przypadku domyślny będzie URL strony podręcznej. Jeśli jest to część aplikacji internetowej lub wyłączenie JS całkowicie przerwie tę stronę, to ten kod ma inne problemy ... - Brian Moeskau
Moje aplikacje internetowe są zaprojektowane tak, aby ulegały degradacji, więc link nadal będzie przydatną stroną. Jeśli twoja aplikacja internetowa nie jest klientem czatu lub czymś interaktywnym, powinno to działać, jeśli poświęcisz czas na projektowanie z myślą o degradacji. - Zach
Problem polega na tym, że jeśli myJsFunc zgłasza błąd, nie zostanie przechwycone dla wyniku false. - Tracker1


Najlepiej byłoby to zrobić:

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

Albo, jeszcze lepiej, masz domyślny link akcji w kodzie HTML, a następnie dodasz do niego element onclick w sposób nie rzucający się w oczy przez JavaScript po renderowaniu DOM, zapewniając w ten sposób, że jeśli JavaScript nie jest obecny / wykorzystany, nie mieć bezużyteczne programy do obsługi zdarzeń, które zajmują się twoimi kodami i potencjalnie zaciemniają (lub przynajmniej rozpraszają) twoją aktualną zawartość.


90





Nie, jeśli mnie pytasz;

Jeśli twój "link" ma wyłącznie na celu uruchomienie kodu JavaScript, nie kwalifikuje się jako link; raczej fragment tekstu z połączoną z nim funkcją JavaScript. Polecam użyć a <span> tag z onclick handler dołączone do niego i niektóre podstawowe CSS do naśladowania łącza. Linki są tworzone dla nawigacji, a jeśli twój kod JavaScript nie jest przeznaczony do nawigacji, to nie powinien być <a> etykietka.

Przykład:

function callFunction() { console.log("function called"); }
.jsAction {
    cursor: pointer;
    color: #00f;
    text-decoration: underline;
}
<p>I want to call a JavaScript function <span class="jsAction" onclick="callFunction();">here</span>.</p>


86



Takie podejście ogranicza "łącze" do operacji tylko myszy. Kotwicę można przeglądać za pomocą klawiatury, a jej zdarzenie "onclick" jest uruchamiane po naciśnięciu klawisza Enter. - AnthonyWJones
Kodowanie kolorami w CSS uniemożliwi przeglądarce korzystanie z niestandardowych kolorów zdefiniowanych przez użytkownika, co może stanowić problem z ułatwieniami dostępu. - Hosam Aly
<span>s nie są przeznaczone zrobić byle co. <A>nchors i <buttons> są wykorzystywane do tego! - redShadow
Za pomocą buttons jest lepszym wyborem tutaj podczas używania span nie jest. - apnerve
Myślę, że rozpiętość jest lepsza niż tag kotwicy. Znacznik zakotwiczenia istnieje, aby skierować cię do obowiązkowego atrybutu href. Jeśli nie zamierzasz używać href, nie używaj kotwicy. Nie ogranicza on łącza do myszy tylko dlatego, że nie jest linkiem. Nie ma href. To bardziej przypomina przycisk, ale nie publikuje. Przerwa nie ma na celu nic zrobić jest całkowicie nieważne. Rozważ menu rozwijane, które uaktywni się po najechaniu myszą. Jest to prawdopodobnie kombinacja przęseł i elementów div, pełniących funkcję przycisku, który rozszerza obszar na ekranie. - NibblyPig


Używanie just # wykonuje pewne zabawne ruchy, więc polecam użyć #self jeśli chcesz zaoszczędzić na wysiłku pisania na klawiaturze JavaScript bla, bla,.


73



WOW, kciuki do góry za tę wskazówkę. Nigdy nie wiedziałem, że możesz użyć tego #self dla nazwanych znaczników i unikaj denerwujących zachowań przeglądarki podczas przeskakiwania na górę strony. Dziękuję Ci. - alonso.torres
Na przykład, #self nie wydaje się być wyjątkowy. Każdy identyfikator fragmentu, który nie jest zgodny z nazwą lub identyfikatorem dowolnego elementu w dokumencie (i nie jest pusty lub "górny"), powinien mieć taki sam efekt. - cHao
Zwykle używam wymyślonej nazwy zakotwiczenia, ale myślę, że zacznę robić to tak, aby była spójna w całej mojej pracy. - Douglas.Sesar
Zasugerowałem ustanowienie #void konwencja w innym komentarzu, ale w rzeczywistości #self jest tak krótki i łatwy do zapamiętania. Wszystko jest lepsze niż # - jakub.g
Ale jeśli klikniesz ten link, będzie to dziwne dla użytkownika, gdy zobaczysz "#void" w adresie URL, wygląda jak i błąd lub błąd, to samo z #self lub czymkolwiek innym. - pmirnd