Jakiej wartości „href” należy użyć w przypadku łączy JavaScript, „#” lub „javascript: void (0)”?


4075

Poniżej przedstawiono dwie metody budowania łącza, 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>


202
Chyba że coś mi umknie, nie <a href="javascript:void(0)" onclick="myJsFunc();">ma absolutnie żadnego sensu. Jeśli musisz użyć javascript:protokołu psuedo, nie potrzebujesz również tego onclickatrybutu. <a href="javascript:myJsFunc();">zrobi dobrze.
Wesley Murch,

65
@WesleyMurch - Jeśli myJsFunc()ma wartość zwracaną, twoja strona się zepsuje . jsfiddle.net/jAd9G ci, że nadal trzeba używać voidtak: <a href="javascript:void myJsFunc();">. Ale zachowanie nadal by się różniło. Wywołanie łącza za pomocą menu kontekstowego nie wyzwala clickzdarzenia.
gilly3

38
Dlaczego nie tylko <a href="javascript:;" onclick="myEvent()"?
3k-

26
javascript:;jest o wiele szybszy do pisania niżjavascript:void(0)
Mike Causer,

78
Najpierw pomyślałem, patrząc na to: „dlaczego miałbyś użyć <a>tagu, jeśli NIE chcesz otworzyć innej strony za pomocą natywnej funkcji przeglądarki, ale raczej uruchomić pewne„ działanie ”javascript? Wystarczy użyć spantagu z klasą js-triggerprawdopodobnie znacznie lepiej ". A może coś mi brakuje?
Adrien Be

Odpowiedzi:


2163

Używam javascript:void(0).

Trzy powody. Zachęcanie do korzystania z #zespołu programistów nieuchronnie prowadzi do tego, że niektórzy używają wartości zwracanej funkcji o nazwie tak:

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

Ale potem zapominają używać return doSomething()w kliknięciu i po prostu używać doSomething().

Drugim powodem unikania #jest to, że finał return false;nie zostanie wykonany, jeśli wywoływana funkcja zgłosi błąd. Dlatego programiści muszą również pamiętać, aby odpowiednio obsługiwać każdy błąd w wywoływanej funkcji.

Trzecim powodem są przypadki, w których onclickwłaściwość zdarzenia jest przypisywana dynamicznie. Wolę mieć możliwość wywoływania funkcji lub przypisywania jej dynamicznie, bez konieczności kodowania funkcji specjalnie dla jednej metody dołączania lub innej. Stąd moje onclick(lub cokolwiek) znaczniki HTML wyglądają tak:

onclick="someFunc.call(this)"

LUB

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

Używanie javascript:void(0)pozwala uniknąć wszystkich powyższych bólów głowy i nie znalazłem żadnych przykładów wad.

Więc jeśli jesteś samotnym programistą, możesz wyraźnie dokonać własnego wyboru, ale jeśli pracujesz jako zespół, musisz określić:

Użyj href="#", upewnij się, że onclickzawsze zawiera return false;na końcu, że dowolna wywoływana funkcja nie zgłasza błędu, a jeśli funkcja zostanie dołączona dynamicznie do onclickwłaściwości, upewnij się, że nie zwróci ona błędu false.

LUB

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

Drugi jest wyraźnie znacznie łatwiejszy do komunikowania się.


329
Zawsze otwieram każdy link w nowej karcie i dlatego osobiście go nienawidzę, gdy ludzie korzystają z tej href="javascript:void(0)"metody
Timo Huovinen,

182
Niestety nie zgadzam się, dlaczego ta odpowiedź ma tak wiele pozytywnych opinii? Każde użycie javascript:powinno być uważane za złą praktykę, natrętne i nie oznacza wdzięcznego obniżenia oceny.
Lankymart

52
Następne dwie odpowiedzi są znacznie lepsze i rozsądniejsze niż ta. Również dwa pierwsze argumenty są niepoprawne, ponieważ event.preventDefault()mają dokładnie zapobiegać domyślnemu zachowaniu (np. Przeskakiwaniu na górę strony w tym przypadku) i wykonywać lepszą pracę bez return false;szaleństwa.
sudee

136
Szybkie przejście do 2013 r .: javascript:void(0)narusza Politykę bezpieczeństwa treści na stronach HTTPS z obsługą CSP. Jedną z opcji byłoby użycie href='#'i event.preventDefault()w module obsługi, ale nie bardzo mi się to podoba. Być może możesz ustanowić konwencję href='#void'i upewnić się, że żaden element na stronie nie ma id="void". W ten sposób kliknięcie łącza do nieistniejącej kotwicy nie spowoduje przewinięcia strony.
jakub.g

24
Możesz użyć „#”, a następnie powiązać zdarzenie kliknięcia ze wszystkimi linkami z „#” jako href. Odbyłoby się to w jQuery z:$('a[href="#"]').click(function(e) { e.preventDefault ? e.preventDefault() : e.returnValue = false; });
Nathan

1325

Ani.

Jeśli możesz mieć rzeczywisty adres URL, który ma sens, użyj go jako HREF. Onclick nie uruchomi się, jeśli ktoś kliknie link środkowy, aby otworzyć nową kartę lub jeśli ma wyłączoną obsługę JavaScript.

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

Zdaję sobie sprawę, że nie zawsze jest to możliwe, ale moim zdaniem należy dążyć do opracowania dowolnej publicznej strony internetowej.

Sprawdź dyskretny JavaScript i ulepszenia progresywne (obie Wikipedia).


19
Czy możesz podać przykład, w jaki sposób można „wstrzyknąć tag zakotwiczony do dokumentu za pomocą JavaScript i odpowiednich procedur obsługi zdarzeń kliknięcia”?
user456584 26.04.13

11
Po co w ogóle wstawiać tag zakotwiczenia, jeśli ma on służyć jedynie do umożliwienia kliknięcia elementu a) kliknięcia b) wyświetlenia kursora „wskaźnika”. Wydaje się nieistotne nawet wstrzykiwanie tagu zakotwiczenia w tym scenariuszu.
zmiażdżyć

12
+1 za żadną, ale jest więcej podejść. Faktem jest, że jedno javascript:lub #oba są złymi praktykami i nie należy ich zachęcać. Ładne artykuły btw.
Lankymart

13
@crush: Nie użyłbym też div ani span; szczerze mówiąc, wydaje się, że właśnie do tego <button>została stworzona. Ale zgodził się: prawdopodobnie nie powinno to oznaczać, <a>że nie ma odpowiedniego miejsca, z którego można by go połączyć.
cHao

14
@cHao Button jest prawdopodobnie najlepszym wyborem. Przypuszczam, że głównym punktem jest to, że elementu HTML nie należy wybierać na podstawie jego domyślnego wyglądu prezentacji, ale raczej jego znaczenia dla struktury dokumentu.
zmiażdżyć

775

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

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

  2. Spędzasz czas na pisaniu niewiarygodnie przesadnego kodu - co ma bardzo małą (jeśli w ogóle) korzyść dla twojej bazy kodu.

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

Dyskretny sposób obsługi JavaScript

Po prostu nie mam hrefatrybutu! Każdy dobry reset CSS zająłby się brakującym domyślnym stylem kursora, więc nie jest to problemem. Następnie dołącz swoją funkcjonalność JavaScript za pomocą wdzięcznych i dyskretnych najlepszych praktyk - które są łatwiejsze w utrzymaniu, ponieważ logika JavaScript pozostaje w JavaScript, a nie w znacznikach - co jest niezbędne, gdy zaczynasz opracowywać aplikacje JavaScript na dużą skalę, które wymagają podzielenia logiki na komponenty i szablony w blackboxie. Więcej na ten temat w Architekturze 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>

Przykład Backbone.js w czarnej skrzynce

Skalowalny przykład komponentu Backbone.js w postaci czarnej skrzynki - zobacz ten działający przykład jsfiddle tutaj . Zwróć uwagę, w jaki sposób stosujemy dyskretne praktyki JavaScript, aw niewielkiej ilości kodu mamy komponent, który może być wielokrotnie powtarzany na stronie bez skutków ubocznych lub konfliktów między różnymi instancjami komponentu. Niesamowity!

Notatki

  • Pominięcie hrefatrybutu aelementu spowoduje, że element nie będzie dostępny za pomocą tabnawigacji kluczowej. Jeśli chcesz, aby te elementy były dostępne za pomocą tabklucza, możesz ustawić tabindexatrybut lub buttonzamiast tego użyć elementów. Możesz łatwo stylizować elementy przycisków, aby wyglądały jak normalne linki, jak wspomniano w odpowiedzi Tracker1 .

  • Pominięcie hrefatrybutu aelementu spowoduje, że Internet Explorer 6 i Internet Explorer 7 nie przyjmą a:hoverstylu, dlatego dodaliśmy prostą podkładkę JavaScript, aby to osiągnąć a.hover. Co jest całkowicie w porządku, ponieważ jeśli nie masz atrybutu href i nie masz wdzięcznej degradacji, twój link i tak nie będzie działał - i będziesz miał większe problemy do zmartwienia.

  • Jeśli chcesz, aby twoja akcja nadal działała z wyłączoną obsługą JavaScript, użyj aelementu z hrefatrybutem, który prowadzi do adresu URL, który wykona akcję ręcznie zamiast przez żądanie Ajax lub cokolwiek innego, co powinno być. Jeśli to robisz, to chcesz upewnić się, że wykonujesz event.preventDefault()wywołanie kliknięcia, aby upewnić się, że kliknięcie przycisku nie powoduje kliknięcia linku. Ta opcja nazywa się wdzięczną degradacją.


163
Zachowaj ostrożność, pozostawienie wyłączonych atrybutów href nie jest kompatybilne z różnymi przeglądarkami, a stracisz takie rzeczy, jak efekty hover w Internet Explorerze
Thomas Davis,

16
Uwaga: buttonsugerowane tutaj podejście w stylu łącza jest nękane nieuniknionym stanem aktywnym „3d” w IE9 i niższych wersjach .
Brennan Roberts

44
Uważam, że ta odpowiedź jest zbyt dogmatyczna. Są chwile, kiedy chcesz po prostu zastosować zachowanie JS do 1 lub 2 href. W takim przypadku przesadą jest zdefiniowanie dodatkowego CSS i wstrzyknięcie całej funkcji JS. W niektórych przypadkach (np. Dodawanie treści za pośrednictwem CMS) w rzeczywistości nie wolno ci wstrzykiwać nowego CSS ani samodzielnego JS, a wbudowane to wszystko, co możesz zrobić. Nie rozumiem, w jaki sposób rozwiązanie inline jest mniej możliwe do utrzymania w praktyce dla 1 lub 2 prostych JS a href. Zawsze bądź podejrzliwy w stosunku do ogólnych ogólnych stwierdzeń dotyczących złych praktyk, w tym tego :)
Jordan Rieger

17
Z tymi wszystkimi „notatkami”, które są trudne do rozwiązania (ustawienie tabindex powoduje problemy na złożonej stronie!). O wiele lepiej po prostu zrobić javascript:void(0). To jest pragmatyczna odpowiedź i jedyna sensowna odpowiedź w prawdziwym świecie.
Abhi Beckert

14
Jeśli zależy ci na tym, aby twoja aplikacja internetowa była dostępna (i powinieneś), prostota i rozsądek przemawiają za href. Szaleństwo leży w kierunku tabindex.
jkade

328

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

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


68
Aby tego uniknąć, należy zwrócić wartość false w module obsługi zdarzeń onclick.
Guvante,

34
Zwrócenie false w module obsługi zdarzeń nie pozwala uniknąć tego, jeśli JavaScript nie działa poprawnie.
Quentin,

28
użycie „#someNonExistantAnchorName” działa dobrze, ponieważ nie ma dokąd przejść.
scunliffe

21
Jeśli masz bazę href, to #lub #somethingzabierze Cię do tej kotwicy na stronie href bazy , zamiast na bieżącej stronie.
Abhi Beckert

11
Shebang ( #!) robi lewę, ale jest to zdecydowanie zła praktyka.
Neel

276

Szczerze nie zasugerowałbym żadnej z nich. Użyłbym stylizowanego <button></button>do tego zachowania.

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ć swoje kliknięcie. Sugeruję również powiązanie za pomocą skryptu, nie używając onclickatrybutu na znaczniku elementu. Jedyny problem to efekt tekstowy 3D psuedo w starszych IE, którego nie można wyłączyć.


Jeśli MUSISZ użyć elementu A, użyj go javascript:void(0);z powodów już wymienionych.

  • Zawsze przechwytuje w przypadku niepowodzenia zdarzenia onclick.
  • Nie spowoduje wystąpienia błędnych wywołań ładowania ani nie wyzwoli innych zdarzeń na podstawie zmiany skrótu
  • Tag skrótu może powodować nieoczekiwane zachowanie, jeśli kliknięcie spadnie (rzuty po kliknięciu), unikaj go, chyba że jest to odpowiednie zachowanie przejściowe, a chcesz zmienić historię nawigacji.

UWAGA: Możesz zastąpić 0ciąg taki 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.


W IE8 / IE9 nie jestem w stanie usunąć przesunięcia „3D” 1px w stanie przycisku: aktywny.
Brennan Roberts

@BrennanRoberts Tak, niestety, każda stylizacja przycisków jest bardziej problematyczna w IE ... Nadal uważam, że jest to prawdopodobnie najbardziej odpowiednie podejście, nie dlatego, że czasami nie łamię własnych zasad.
Tracker1,

Wtedy nie używać <button>ale input type=buttonzamiast tego?
Patrik Affentranger,

4
Następnie użyj <clickable>elementu. Lub <clickabletim>jeśli wolisz. Niestety użycie niestandardowego znacznika lub zwykłego div może utrudnić użytkownikom klawiatury skupienie elementu.
joeytwiddle

28
Ta odpowiedź powinna być na górze. Jeśli masz ten dylemat, są szanse, że tak naprawdę potrzebujesz button. Na szczęście IE9 szybko traci udziały w rynku, a aktywny efekt 1px nie powinien powstrzymywać nas od używania znaczników semantycznych. <a>to link, który ma cię gdzieś wysłać, do działań, które mamy <button>.
mjsarfatti

141

Pierwszy, najlepiej z prawdziwym linkiem do na wypadek, gdyby użytkownik wyłączył JavaScript. Pamiętaj tylko o zwróceniu wartości false, aby zapobiec uruchomieniu zdarzenia kliknięcia, jeśli JavaScript zostanie wykonany.

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

Jeśli używasz Angular2, ten sposób działa:

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

Zobacz tutaj https://stackoverflow.com/a/45465728/2803344


19
Więc w aplikacjach użytkownika z włączoną obsługą JavaScript i obsługiwaną funkcją uruchom funkcję JavaScript, cofając się (w przypadku aplikacji użytkownika, w których JS nie działa z jakiegokolwiek powodu) do linku do góry strony? Rzadko jest to rozsądnym rozwiązaniem awaryjnym.
Quentin,

21
„najlepiej z prawdziwym linkiem do na wypadek, gdyby użytkownik wyłączył JavaScript”, powinien przejść na przydatną stronę, a nie #, nawet jeśli jest to tylko wyjaśnienie, że witryna potrzebuje JS do działania. jeśli chodzi o niepowodzenia, spodziewam się, że programista zastosuje prawidłowe wykrywanie funkcji przeglądarki itp. przed wdrożeniem.
Zach.

Zakładam (mam nadzieję), że coś takiego może służyć jedynie do wyświetlania wyskakujących okienek lub czegoś podobnego prostego. W takim przypadku domyślnym adresem URL będzie wyskakująca strona. Jeśli jest to część aplikacji internetowej lub wyłączenie JS całkowicie
zepsułoby

5
Moje aplikacje internetowe zostały zaprojektowane tak, aby z wdziękiem ulegały degradacji, więc link nadal będzie przydatną stroną. O ile 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.

2
Problem polega na tym, że jeśli myJsFunc zgłasza błąd, nie zostanie on przechwycony w przypadku zwrotu false.
Tracker1

106

Ani jeśli mnie zapytasz;

Jeśli „link” ma na celu uruchomienie kodu JavaScript, nie kwalifikuje się jako link; raczej fragment tekstu z dołączoną funkcją JavaScript. Polecam użycie <span>tagu z onclick handlerdołączonym do niego i podstawowego CSS, aby naśladować link. Linki są tworzone do nawigacji, a jeśli kod JavaScript nie służy do nawigacji, nie powinien być <a>tagiem.

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>


126
Takie podejście ogranicza „łącze” tylko do operacji myszy. Kotwicę można odwiedzać za pomocą klawiatury, a jej zdarzenie „kliknięcie” jest uruchamiane po naciśnięciu klawisza Enter.
AnthonyWJones

40
Zakodowane na stałe kolory w CSS uniemożliwiłyby przeglądarce używanie niestandardowych kolorów, które użytkownik może zdefiniować, co może stanowić problem z dostępnością.
Hosam Aly

30
<span>nie są przeznaczone do robienia czegokolwiek. <A>nchors i <buttons>są do tego wykorzystywane!
redShadow

22
Używanie buttonsjest tutaj lepszym wyborem, podczas gdy używanie spannie jest.
apnerve

1
Myślę, że rozpiętość jest lepsza niż tag zakotwiczenia. Tag kotwicy istnieje, aby skierować Cię do jego obowiązkowego atrybutu href. Jeśli nie zamierzasz używać href, nie używaj kotwicy. Nie ogranicza łącza tylko do myszy, ponieważ nie jest to łącze. Nie ma href. To bardziej jak przycisk, ale nie publikuje. Rozpiętość nieprzeznaczona do robienia czegokolwiek jest całkowicie nieprawidłowa. Rozważ menu rozwijane, które aktywuje się po najechaniu myszką. Prawdopodobnie jest to kombinacja zakresów i div, pełniąca funkcję przycisku, który rozszerza obszar na ekranie.
NibblyPig

97

Idealnie byłoby to zrobić:

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

Lub nawet lepiej, będziesz mieć domyślny link akcji w kodzie HTML i dodasz zdarzenie onclick do elementu dyskretnie przez JavaScript po renderowaniu DOM, zapewniając w ten sposób, że jeśli JavaScript nie jest obecny / wykorzystywany, nie będziesz mieć bezużyteczne programy obsługi zdarzeń, które oszukują kod i potencjalnie zaciemniają (lub przynajmniej odwracają uwagę) rzeczywistą treść.


76

Używanie #powoduje tylko kilka zabawnych ruchów, więc polecam użyć tego, #selfjeśli chcesz zaoszczędzić na pisaniu JavaScript bla, bla,.


7
WOW, kciuki do góry za tę wskazówkę. Nigdy nie wiedziałem, że możesz użyć #selfnazwanych tagów i uniknąć irytujących zachowań przeglądarki podczas przeskakiwania na górę strony. Dziękuję Ci.
alonso.torres

34
Dla porównania, #selfnie wydaje się być wyjątkowy. Każdy identyfikator fragmentu, który nie pasuje do nazwy lub identyfikatora dowolnego elementu w dokumencie (i nie jest pusty lub „górny”), powinien mieć ten sam efekt.
cHao

1
Zwykle używam tylko gotowej nazwy kotwicy, ale myślę, że zacznę to robić, aby zachować spójność w całej mojej pracy.
Douglas.Sesar

11
W #voidinnym komentarzu zasugerowałem ustanowienie konwencji, ale w rzeczywistości #selfjest tak krótkie i łatwe do zapamiętania. Wszystko jest lepsze niż#
jakub.g

6
Ale jeśli klikniesz ten link, dziwne będzie dla użytkownika, aby zobaczyć „# unikaj” w adresie URL, wygląda jak i błąd lub błąd, to samo z #self lub czymkolwiek.
pmiranda

68

Używam następujących

<a href="javascript:;" onclick="myJsFunc();">Link</a>

zamiast

<a href="javascript:void(0);" onclick="myJsFunc();">Link</a>

2
Używam javascript:(bez średnika), ponieważ po najechaniu myszą na pasku stanu wygląda ona najładniej.
Boann

4
Ten kod może powodować złe niespodzianki w starszych IE. W pewnym momencie
łamał

Zawsze możesz to zrobić ... javascript:void('Do foo')ponieważ void zwróci niezdefiniowane niezależnie, da użytkownikowi wskaźnik, co zrobi kliknięcie. Gdzie Do foomoże być Delete record Xlub co chcesz.
Tracker1,

53

Zgadzam się z sugestiami w innym miejscu, mówiącymi, że powinieneś używać zwykłego adresu URL w hrefatrybucie, a następnie wywołać funkcję JavaScript w kliknięciu. Wadą jest to, że automatycznie dodają return falsepo rozmowie.

Problem z tym podejściem polega na tym, że jeśli funkcja nie będzie działać lub wystąpi jakiś problem, łącze stanie się nieskomplikowalne. Zdarzenie Onclick zawsze zwróci false, więc normalny adres URL nie zostanie wywołany.

Istnieje bardzo proste rozwiązanie. Pozwól funkcji powrócić, truejeśli działa poprawnie. Następnie użyj zwróconej wartości, aby określić, czy kliknięcie powinno zostać anulowane, czy nie:

JavaScript

function doSomething() {
    alert( 'you clicked on the link' );
    return true;
}

HTML

<a href="path/to/some/url" onclick="return !doSomething();">link text</a>

Zauważ, że neguję wynik doSomething()funkcji. Jeśli to zadziała, wróci true, więc zostanie zanegowane ( false) i path/to/some/URLnie zostanie wywołane. Jeśli funkcja zwróci false(na przykład przeglądarka nie obsługuje czegoś używanego w funkcji lub coś innego pójdzie nie tak), zostanie to zanegowane truei path/to/some/URLzostanie wywołane.


50

#jest lepszy niż javascript:anything, ale następujące są jeszcze lepsze:

HTML:

<a href="/gracefully/degrading/url/with/same/functionality.ext" class="some-selector">For great justice</a>

JavaScript:

$(function() {
    $(".some-selector").click(myJsFunc);
});

Zawsze powinieneś dążyć do pełnej wdzięku degradacji (w przypadku, gdy użytkownik nie ma włączonej obsługi JavaScript ... i gdy jest to zgodne ze specyfikacjami i budżetem). Ponadto uważanie za niewłaściwe korzystanie z atrybutów i protokołu JavaScript bezpośrednio w HTML jest uważane za złą formę.


1
@Muhd: Powrót powinien aktywować się clickna linkach…
Ry-

50

Polecam <button>zamiast tego użyć elementu, zwłaszcza jeśli formant ma wywoływać zmianę danych. (Coś jak POST.)

Jeszcze lepiej, jeśli wstrzykujesz elementy dyskretnie, rodzaj progresywnego ulepszenia. (Zobacz ten komentarz .)


2
Ja też uważam, że to najlepsze rozwiązanie. Jeśli masz element, który ma wykonać akcję, nie ma powodu, aby był to link.
mateuscb 17.10.11

Gdybyś zapytał, a Twój href wyglądałby jak „# coś”, niektóre z pozostałych wymienionych odpowiedzi mogłyby służyć, ale: Bez powiązania hrefa z czymkolwiek sensownym, nie ma sensu mieć href, a nawet łącza. Sugerowane użycie przycisku może zrobić, lub użyć dowolnego innego elementu, ale link nigdzie nie dziękuje.
kontur

1
Kolejną zaletą tego jest to, że Bootstrap .btnsprawia, że ​​przyciski i linki wyglądają dokładnie tak samo.
Ciro Santilli 冠状 病毒 审查 六四 事件 法轮功

Z perspektywy użytkownika buttonnie wprowadza także # do adresu URL ani nie wyświetla ahref jako javascript :;
Coll.

39

O ile nie wypisujesz linku za pomocą JavaScript (abyś wiedział, że jest włączony w przeglądarce), najlepiej dostarczać odpowiedni link dla osób przeglądających z wyłączoną obsługą JavaScript, a następnie uniemożliwić domyślną akcję linku w swoim kliknięciu moduł obsługi zdarzeń. W ten sposób osoby z włączoną obsługą JavaScript uruchomią tę funkcję, a osoby z wyłączoną obsługą JavaScript przejdą na odpowiednią stronę (lub lokalizację na tej samej stronie) zamiast klikać link i nic się nie dzieje.


36

Zdecydowanie hash ( #) jest lepszy, ponieważ w JavaScript jest to pseudoschem:

  1. zanieczyszcza historię
  2. tworzy nową kopię silnika
  3. działa w zasięgu globalnym i nie szanuje systemu zdarzeń.

Oczywiście „#” z programem obsługi onclick, który zapobiega domyślnemu działaniu, jest [znacznie] lepszy. Ponadto link, którego jedynym celem jest uruchomienie JavaScript, nie jest tak naprawdę „linkiem”, chyba że wysyłasz użytkownika do jakiejś sensownej kotwicy na stronie (tylko # wyśle ​​na górę), gdy coś pójdzie nie tak. Możesz po prostu symulować wygląd i styl połączenia z arkuszem stylów i całkowicie zapomnieć o href.

Ponadto, w odniesieniu do sugestii cowgod, szczególnie tej: ...href="javascript_required.html" onclick="...To dobre podejście, ale nie rozróżnia scenariuszy z „wyłączoną obsługą JavaScript” i „niepowodzeniem po kliknięciu”.


1
@Berker Yüceer, dlaczego CW?
Bezpłatne konsultacje

30

Zwykle wybieram

<a href="javascript:;" onclick="yourFunction()">Link description</a>

Jest krótszy niż javascript: void (0) i robi to samo.


27

Użyłbym:

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

Powody:

  1. To sprawia, że hrefproste, wyszukiwarki tego potrzebują. Jeśli użyjesz czegoś innego (np. Łańcucha), może to spowodować 404 not foundbłąd.
  2. Gdy kursor myszy znajdzie się nad linkiem, nie pokazuje, że jest to skrypt.
  3. Korzystając return false;ze strony, strona nie przeskakuje na górę ani nie łamie backprzycisku.

nie zgadzam się z „1.” ponieważ powoduje błąd, gdy umieścisz link do skryptu, gdy skrypty nie są dozwolone. więc tego rodzaju linki należy dodać z kodem js. w ten sposób ludzie mogą uniknąć tych linków, podczas gdy skrypt jest niedozwolony i nie widzą żadnych błędów.
Berker Yüceer,

25

Wybieram użycie javascript:void(0), ponieważ użycie tego może uniemożliwić kliknięcie prawym przyciskiem, aby otworzyć menu zawartości. Ale javascript:;jest krótszy i robi to samo.


24

Tak więc, gdy robisz kilka rzeczy JavaScript z <a />tagiem i jeśli również wstawisz href="#", możesz dodać return false na końcu zdarzenia (w przypadku powiązania zdarzenia inline), np .:

<a href="#" onclick="myJsFunc(); return false;">Run JavaScript Code</a>

Możesz też zmienić atrybut href za pomocą JavaScript, np .:

<a href="javascript://" onclick="myJsFunc();">Run JavaScript Code</a>

lub

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

Ale semantycznie wszystkie powyższe sposoby osiągnięcia tego są złe (choć działa dobrze) . Jeśli jakikolwiek element nie jest tworzony do poruszania się po stronie i z którym związane są pewne elementy JavaScript, nie powinien to być <a>tag.

Możesz po prostu użyć <button />zamiast tego do zrobienia rzeczy lub dowolnego innego elementu, takiego jak b, zakres lub cokolwiek, co tam pasuje, zgodnie z twoimi potrzebami, ponieważ możesz dodawać zdarzenia do wszystkich elementów.


Tak, jest jedna korzyść do użytku <a href="#">. Gdy to zrobisz, domyślnie otrzymasz kursor na tym elemencie a href="#". W tym celu myślę, że możesz użyć CSS do tego, cursor:pointer;co również rozwiązuje ten problem.

I na koniec, jeśli wiążesz zdarzenie z samego kodu JavaScript, możesz to zrobić, event.preventDefault()jeśli używasz <a>tagu, ale jeśli nie używasz <a>tagu do tego, masz przewagę, nie „ muszę to zrobić.

Jeśli więc widzisz, lepiej nie używać tagu do tego typu rzeczy.


23

Nie używaj linków wyłącznie w celu uruchomienia JavaScript.

Użycie href = "#" przewija stronę do góry; użycie void (0) powoduje problemy nawigacyjne w przeglądarce.

Zamiast tego użyj elementu innego niż link:

<span onclick="myJsFunc()" class="funcActuator">myJsFunc</span>

I stylizuj to za pomocą CSS:

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

13
Użyj przycisku, a nie zakresu. Przyciski naturalnie mieszczą się w kolejności ustawiania ostrości, więc można uzyskać do nich dostęp bez myszy / gładzika / itp.
Quentin

4
Dodanie komentarza tony Quentina: jak napisano obecnie, użytkownicy klawiatury nie osiągną spanelementu, ponieważ jest to element, na którym nie można ustawić ostrości. Dlatego potrzebujesz przycisku.
Tsundoku,

1
Możesz ustawić ostrość, dodając tabindex="0"do zakresu. To powiedziawszy, użycie przycisku jest lepsze, ponieważ daje pożądaną funkcjonalność za darmo. Aby był dostępny za pomocą zakresu, musisz nie tylko dołączyć moduł obsługi kliknięć, ale także moduł obsługi zdarzeń klawiatury, który szuka naciśnięć spacji lub klawisza Enter, a następnie uruchamia normalny moduł obsługi kliknięć. Chciałbyś również zmienić drugi selektor CSS na .funcActuator:hover, .funcActuator:focustak, aby widoczny był fakt, że element ma fokus.
Bezużyteczny kod

22

Lepiej byłoby użyć jQuery,

$(document).ready(function() {
    $("a").css("cursor", "pointer");
});

i pomiń oba href="#" i href="javascript:void(0)".

Znacznik zakotwiczenia będzie podobny

<a onclick="hello()">Hello</a>

Wystarczająco proste!


5
Właśnie to chciałem powiedzieć. Jeśli link ma sensowny adres URL, użyj go. W przeciwnym razie po prostu pomiń href lub użyj czegoś bardziej semantycznie odpowiedniego niż <a>. Jeśli jedynym powodem, dla którego wszyscy zalecają włączenie href, jest najechanie palcem na kursor, wystarczy „a {kursor: wskaźnik;}”.
Matt Kantor

12
To daje straszną dostępność. Wypróbuj w SO: nie możesz oflagować postu bez użycia myszy. Łącza „link” i „edytuj” są dostępne na kartach, ale „flaga” nie.
Nicolás,

6
Zgadzam się z tą opcją. Jeśli kotwica nie ma innego celu niż JavaScript, nie powinna mieć href. @Fatih: Korzystanie z jQuery oznacza, że ​​jeśli JavaScript jest wyłączony, link NIE będzie miał wskaźnika.
Scott Rippey,

3
Jeśli zamierzasz wybrać tę drogę, dlaczego nie powiązać kliknięcia również przy użyciu jQuery? Jedną z wielkich zalet korzystania z jQuery jest możliwość oddzielenia javascript od znaczników.
Muhd

4
Nie mogę uwierzyć, że ta odpowiedź ma 11 głosów. To jest straszne. Dlaczego dodajesz styl za pomocą Javascript (i jQuery ??), a następnie definiujesz akcję onclick w HTML? Straszny.
MMM

20

Jeśli używasz AngularJS , możesz użyć następujących opcji:

<a href="">Do some fancy JavaScript</a>

Co nic nie da.

Dodatkowo

  • Nie zabierze Cię na górę strony, jak w (#)
    • Dlatego nie musisz jawnie wracać falsez JavaScript
  • To jest krótkie, zwięzłe

6
Spowodowałoby to jednak ponowne załadowanie strony, a ponieważ do modyfikowania strony zawsze używamy języka JavaScript, jest to niedopuszczalne.
Henry Hu

@HenryHu Dowiedziałem się, że przyczyną tego nie było przeładowania z powodu AngularJS. Zobacz moją zaktualizowaną odpowiedź.
whirlwin

19

Jeżeli nie ma href być może nie ma powodu, aby używać tagu kotwicy.

Możesz dołączyć zdarzenia (kliknięcie, najechanie kursorem itp.) Do prawie każdego elementu, więc dlaczego nie użyć po prostu a spanlub adiv ?

A dla użytkowników z wyłączoną obsługą JavaScript: jeśli nie ma rezerwy (na przykład alternatywy href), powinni przynajmniej nie być w stanie zobaczyć tego elementu i wchodzić w interakcje z nim, bez względu na to, czy jest to tag, <a>czy <span>tag.


19

Zwykle zawsze powinieneś mieć link rezerwowy, aby upewnić się, że klienci z wyłączoną obsługą JavaScript nadal mają pewną funkcjonalność. Ta koncepcja nazywa się dyskretnym JavaScript.

Przykład ... Załóżmy, że masz następujący link wyszukiwania:

<a href="search.php" id="searchLink">Search</a>

Zawsze możesz wykonać następujące czynności:

var link = document.getElementById('searchLink');

link.onclick = function() {
    try {
        // Do Stuff Here        
    } finally {
        return false;
    }
};

W ten sposób osoby z wyłączoną obsługą JavaScript są przekierowywane, search.phppodczas gdy twoi widzowie z JavaScript mają dostęp do twojej rozszerzonej funkcjonalności.


17

Osobiście używam ich w połączeniu. Na przykład:

HTML

<a href="#">Link</a>

z odrobiną jQuery

$('a[href="#"]').attr('href','javascript:void(0);');

lub

$('a[href="#"]').click(function(e) {
   e.preventDefault();
});

Ale używam tego tylko do zapobiegania przeskakiwaniu strony na górę, gdy użytkownik kliknie pustą kotwicę. Rzadko używam onClick i innych onzdarzeń bezpośrednio w HTML.

Moją sugestią byłoby użycie <span>elementu z classatrybutem zamiast kotwicy. Na przykład:

<span class="link">Link</span>

Następnie przypisz tę funkcję do .linkskryptu owiniętego w treści i tuż przed </body>tagiem lub w zewnętrznym dokumencie JavaScript.

<script>
    (function($) {
        $('.link').click(function() {
            // do something
        });
    })(jQuery);
</script>

* Uwaga: W przypadku dynamicznie tworzonych elementów użyj:

$('.link').on('click', function() {
    // do something
});

W przypadku dynamicznie tworzonych elementów, które są tworzone z dynamicznie tworzonymi elementami, użyj:

$(document).on('click','.link', function() {
    // do something
});

Następnie możesz zaprojektować element span, aby wyglądał jak kotwica z małym CSS:

.link {
    color: #0000ee;
    text-decoration: underline;
    cursor: pointer;
}
.link:active {
    color: red;
}

Oto przykład wyżej wspomnianego jsFiddle .


16

W zależności od tego, co chcesz osiągnąć, możesz zapomnieć o kliknięciu i po prostu użyć href:

<a href="javascript:myJsFunc()">Link Text</a>

To omija potrzebę zwrotu false. Nie podoba mi się ta #opcja, ponieważ, jak wspomniano, zabierze użytkownika na górę strony. Jeśli masz gdzieś wysłać użytkownika, jeśli nie ma włączonej obsługi JavaScript (co jest rzadkością tam, gdzie pracuję, ale bardzo dobry pomysł), to proponowana metoda Steve'a działa świetnie.

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

Na koniec możesz użyć, javascript:void(0)jeśli nie chcesz, aby ktokolwiek nigdzie jeździł i jeśli nie chcesz wywoływać funkcji JavaScript. Działa świetnie, jeśli masz obraz, który ma się zdarzyć po najechaniu myszką, ale użytkownik nie ma nic do kliknięcia.


3
Jedynym minusem tego (z pamięci, mogę się mylić) jest to, że IE nie uważa A za A, jeśli nie masz w nim href. (Więc reguły CSS nie będą działać)
Benjol

16

Kiedy mam kilka sztucznych linków, wolę dać im klasę „bez linków”.

Następnie w jQuery dodaję następujący kod:

$(function(){
   $('.no-link').click(function(e){
       e.preventDefault();
   });
});

A w przypadku HTML link jest po prostu

<a href="/" class="no-link">Faux-Link</a>

Nie lubię używać Hash-Tagów, chyba że są one używane do zakotwiczeń, i robię to tylko wtedy, gdy mam więcej niż dwa fałszywe linki, w przeciwnym razie korzystam z javascript: void (0).

<a href="javascript:void(0)" class="no-link">Faux-Link</a>

Zazwyczaj lubię po prostu unikać korzystania z linków i po prostu owijać coś wokół siebie i używać tego jako sposobu na aktywację jakiegoś kodu JavaScript, takiego jak wyskakujące okienko lub odsłonięcie zawartości.


16

Wierzę, że przedstawiasz fałszywą dychotomię. To nie jedyne dwie opcje.

Zgadzam się z panem D4V360, który zasugerował, że nawet jeśli używasz tagu kotwicy, tak naprawdę nie masz tutaj kotwicy. Wszystko, co masz, to specjalna sekcja dokumentu, która powinna zachowywać się nieco inaczej. <span>Tag jest o wiele bardziej odpowiednie.


Również, jeśli chcesz zamienić na aa span, musisz pamiętać, aby ustawić ostrość za pomocą klawiatury.
AndFisher,

16

Próbowałem obu w Google Chrome z narzędziami dla programistów i id="#"zajęło to 0,32 sekundy. Podczas gdy javascript:void(0)metoda zajęła tylko 0,18 sekundy. Tak więc w Google Chrome javascript:void(0)działa lepiej i szybciej.


W rzeczywistości nie robią tego samego. # powoduje przejście do góry strony.
Jochen Schultz

13

Zasadniczo parafrazuję ten praktyczny artykuł, używając progresywnego ulepszania . Krótka odpowiedź jest taka, że nigdy nie używasz javascript:void(0);lub #chyba że interfejs użytkownika został już wywnioskować, że JavaScript jest włączona, w takim przypadku należy użyćjavascript:void(0); . Nie używaj też span jako linków, ponieważ jest to semantycznie fałszywe na początek.

Dobrym zwyczajem jest również używanie w aplikacji tras przyjaznych SEO , takich jak / Home / Action / Parameters. Jeśli masz link do strony, która najpierw działa bez JavaScript, możesz później poprawić jej jakość. Użyj prawdziwego linku do działającej strony, a następnie dodaj zdarzenie onlick, aby ulepszyć prezentację.

Oto próbka. Strona główna / ChangePicture to działający link do formularza na stronie wraz z interfejsem użytkownika i standardowymi przyciskami przesyłania HTML, ale ładniej wygląda w modalnym oknie dialogowym z przyciskami jQueryUI. Tak czy inaczej, w zależności od przeglądarki, działa to w pierwszej kolejności.

<p><a href="Home/ChangePicture" onclick="return ChangePicture_onClick();" title="Change Picture">Change Picture</a></p>

<script type="text/javascript">
    function ChangePicture_onClick() {
        $.get('Home/ChangePicture',
              function (htmlResult) {
                  $("#ModalViewDiv").remove(); //Prevent duplicate dialogs
                  $("#modalContainer").append(htmlResult);
                  $("#ModalViewDiv").dialog({
                      width: 400,
                      modal: true,
                      buttons: {
                          "Upload": function () {
                              if(!ValidateUpload()) return false;
                              $("#ModalViewDiv").find("form").submit();
                          },
                          Cancel: function () { $(this).dialog("close"); }
                      },
                      close: function () { }
                  });
              }
        );
        return false;
    }
</script>

Pod względem SEO wolałbym tak. Użycie tylu przyjaznych adresów URL zdecydowanie poprawi współczynnik wartości strony.
Chetabahana
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.