Funkcja JavaScript w href vs. onclick

474

Chcę uruchomić prostą funkcję JavaScript na kliknięcie bez żadnego przekierowania.

Czy jest jakaś różnica lub korzyść między umieszczeniem wywołania JavaScript w hrefatrybucie (na przykład:

<a href="javascript:my_function();window.print();">....</a>

) vs. umieszczenie go w onclickatrybucie (powiązanie go ze onclickzdarzeniem)?

SkunkSpinner
źródło
5
To pytanie zostało omówione wcześniej: stackoverflow.com/questions/245868/…
SolutionYogi

Odpowiedzi:

276

Umieszczenie kliknięcia w href obraziłoby tych, którzy mocno wierzą w oddzielenie treści od zachowania / działania. Argument polega na tym, że treść HTML powinna koncentrować się wyłącznie na treści, a nie na prezentacji lub zachowaniu.

Typową ścieżką w dzisiejszych czasach jest użycie biblioteki javascript (np. Jquery) i utworzenie modułu obsługi zdarzeń za pomocą tej biblioteki. Wyglądałoby to tak:

$('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );
Parand
źródło
1
Lub mootools, prototyp, dojo ... lub zwykły w javascript, ale byłoby to o wiele więcej kodu, ale warte ćwiczenia.
Ryan Florence,
15
Jeśli nie musisz nic robić z obiektem zdarzenia, zwykły javascript jest dość prosty. Pobierz węzeł DOM za pomocą obj = document.getElementById (), a następnie ustaw obj.onclick = foo
Matt Bridges
1
co z rozdziałem treści, gdy <a href> jest generowany w locie, powiedzmy, w wyskakującym oknie, a nadal potrzebujesz specjalnego zachowania kliknięcia?
Serge
6
Ale nie było pytanie z prośbą o różnicy między uruchomieniem połączenia inline JS w hrefporównaniu inline w onclick? Zakładając, że z jakiegoś powodu zamierzasz umieścić go w linii, którego powinieneś użyć? (W praktyce zrobiłbym to, co zasugerowałeś, ale wydaje ci się, że pominąłeś różnicę między tymi dwoma atrybutami.)
nnnnnn
1
Za jednym razem, gdybym zalecał umieszczenie wywołania funkcji w środku, a nie zdarzenie onclick dla łącza, dynamicznie tworzysz linki na stronie, które wywołują tę samą funkcję, ale mogą nie mieć unikalnych identyfikatorów. Mam formularz internetowy, w którym użytkownik może dodawać i usuwać elementy, i umieszczam kliknięcie on-href w linkach w dynamicznie tworzonych divach, dzięki czemu mogę szybciej rozpocząć przetwarzanie skryptu, zamiast używać czegoś mniej szczegółowego, np. Względnego identyfikatora lub Nazwa klasy.
MistyDawn
976

zły:

<a id="myLink" href="javascript:MyFunction();">link text</a>

dobrze:

<a id="myLink" href="#" onclick="MyFunction();">link text</a>

lepszy:

<a id="myLink" href="#" onclick="MyFunction();return false;">link text</a>

jeszcze lepiej 1:

<a id="myLink" title="Click to do something"
 href="#" onclick="MyFunction();return false;">link text</a>

jeszcze lepiej 2:

<a id="myLink" title="Click to do something"
 href="PleaseEnableJavascript.html" onclick="MyFunction();return false;">link text</a>

Dlaczego lepiej ponieważ return falseuniemożliwi przeglądanie łącza przez przeglądarkę

Najlepsza:

Użyj jQuery lub innej podobnej struktury, aby dołączyć moduł obsługi onclick według identyfikatora elementu.

$('#myLink').click(function(){ MyFunction(); return false; });
demp
źródło
21
Byłoby inne rozwiązanie, które byłoby najlepsze tam, gdzie hrefnie jest ustawione, #ale na rzeczywisty link do przeglądarek noJS.
helly0d
6
Co jeśli powiem ci, że pierwszy (zły) działa w ten sam (właściwy) sposób we wszystkich przeglądarkach za pomocą kliknięcia środkowego.
Vloxxity 24.04.13
14
Co jest złego w <a id="myLink" href="javascript:MyFunction();">?
Vaddadi Kartick
6
Tylko moje skromne 5 centów: „najlepszą” opcją byłoby użycie przycisków do klikania (zdarzenia onclick?) I pozostawienie kotwic z ich hrefami do tego, co pierwotnie zamierzali projektować: być kotwicami do linków do innych stron.
nidalpres
4
Wiązanie z kliknięciem w javascript ma jedną wadę: Później, gdy debugujesz kogoś innego, jego forma, naprawdę trudno jest znaleźć gdzie i jakiego rodzaju javascript wiąże ten element.
Maarten Kieft,
69

Jeśli chodzi o javascript , jedną różnicą jest to, że thissłowo kluczowe w onclickmodule obsługi będzie odnosić się do elementu DOM, którego onclickatrybutem jest (w tym przypadku <a>elementem), podczas gdy thisw hrefatrybucie będzie odwoływał się do windowobiektu.

Jeśli chodzi o prezentację , jeśli hrefatrybut nie występuje w łączu (tj. <a onclick="[...]">), Wówczas domyślnie przeglądarki wyświetlają textkursor (a nie często pożądany pointerkursor), ponieważ traktuje on <a>jako kotwicę, a nie łącze.

Jeśli chodzi o zachowanie , przy określaniu akcji według nawigacji href, przeglądarka zazwyczaj obsługuje otwieranie tego hrefw osobnym oknie za pomocą menu skrótów lub menu kontekstowego. Nie jest to możliwe przy określaniu akcji tylko za pośrednictwem onclick.


Jeśli jednak pytasz, jaki jest najlepszy sposób uzyskania dynamicznej akcji po kliknięciu obiektu DOM, najlepszym rozwiązaniem jest dołączenie zdarzenia przy użyciu javascript niezależnego od treści dokumentu. Możesz to zrobić na wiele sposobów. Częstym sposobem jest użycie biblioteki javascript, takiej jak jQuery, do powiązania zdarzenia:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<a id="link" href="http://example.com/action">link text</a>
<script type="text/javascript">
    $('a#link').click(function(){ /* ... action ... */ })
</script>
Adam
źródło
9
Dzięki za potwierdzenie mojego podejrzenia, że ​​„to” różni się w „href” od „onclick”.
joonas.fi
17

używam

Click <a nohref style="cursor:pointer;color:blue;text-decoration:underline"
onClick="alert('Hello World')">HERE</a>

Daleka droga, ale załatwia sprawę. użyj stylu A, aby uprościć, a następnie:

<style> A {cursor:pointer;color:blue;text-decoration:underline; } </style> 
<a nohref onClick="alert('Hello World')">HERE</a>
Clif Collins
źródło
10
+1 Naprawdę świetnie! :-) Nigdy wcześniej nie słyszałem o nohrefatrybucie. Jest to najbardziej logiczny / elegancki sposób radzenia sobie z takimi działaniami javascript. Jest to zgodne z FF12 i IE8. Dlatego będę zastąpić wszystkie moje href="JavaScript:void(0);"przez nohref. Wielkie dzięki. Twoje zdrowie.
olibre
7
nie jest obsługiwany przez główne przeglądarki, dlaczego powinniśmy tego używać? w3schools.com/tags/att_area_nohref.asp
hetaoblog
11
nohrefjest częścią areatagu, nie a! Twój przykład jest taki sam jak<a onClick="alert('Hello World')">HERE</a>
nZeus
6
Po prostu „nie rób tego ostrzeżenia”. Jest to całkowicie niestandardowa i zła rada. nohrefnie istnieje na atagu.
Colin 't Hart
11

Oprócz wszystkich tutaj, href jest wyświetlany na pasku stanu przeglądarki, a nie klikaj. Myślę, że pokazanie kodu javascript nie jest przyjazne dla użytkownika.

Kamarey
źródło
10

najlepszym sposobem na to jest:

<a href="#" onclick="someFunction(e)"></a>

Problem polega na tym, że spowoduje to dodanie skrótu (#) na końcu adresu URL strony w przeglądarce, co wymaga od użytkownika dwukrotnego kliknięcia przycisku Wstecz, aby przejść do strony przed Twoją. Biorąc to pod uwagę, musisz dodać trochę kodu, aby zatrzymać propagację zdarzeń. Większość zestawów narzędzi javascript będzie już mieć do tego funkcję. Na przykład używa zestawu narzędzi dojo

dojo.stopEvent(event);

aby to zrobić.

linusthe3rd
źródło
9
Chciałbym ostrzec, że jeśli używasz href="#"przeglądarki, wyszuka nazwany tag kotwicy, a ponieważ go nie znajdzie, spowoduje to przewinięcie okna do góry strony, co może nie być zauważalne, jeśli jesteś już na szczycie. Aby uniknąć tego zachowania, użyj: href="javascript:;"zamiast.
alonso.torres
1
@ alonso.torres Dobra uwaga, ale dlatego wspomniałem o użyciu dojo.stopEvent () - zatrzyma propagację / propagację zdarzeń i domyślne zachowanie kliknięcia kotwicy.
linusthe3rd
7
Zamiast stopEvent, dlaczego nie wraca false (onclick = "someFunction (e); return false;")
stracktracer
10

Najlepsza odpowiedź to bardzo zła praktyka, nigdy nie należy nigdy łączyć z pustym hashem, ponieważ może to powodować problemy w przyszłości.

Najlepiej jest powiązać moduł obsługi zdarzeń z elementem, jak twierdzi wiele innych osób, <a href="javascript:doStuff();">do stuff</a>działa jednak doskonale w każdej nowoczesnej przeglądarce i używam go szeroko podczas renderowania szablonów, aby uniknąć konieczności ponownego wiązania dla każdej instancji. W niektórych przypadkach takie podejście zapewnia lepszą wydajność. YMMV

Kolejny interesujący kawałek ...

onclicki hrefzachowują się inaczej podczas bezpośredniego wywoływania javascript.

onclickprzekaże thiskontekst poprawnie, podczas gdy hrefnie, lub innymi słowy <a href="javascript:doStuff(this)">no context</a>nie będzie działać, podczas gdy <a onclick="javascript:doStuff(this)">no context</a>będzie.

Tak, pominąłem href. Chociaż nie jest to zgodne ze specyfikacją, będzie działać we wszystkich przeglądarkach, chociaż najlepiej, aby zawierało href="javascript:void(0);"dobrą miarę

Eduardo
źródło
8

Posiadanie javascript:dowolnego atrybutu, który nie jest specjalnie przeznaczony do skryptowania, jest przestarzałą metodą HTML. Chociaż technicznie to działa, nadal przypisujesz właściwości javascript do atrybutu innego niż skrypt, co nie jest dobrą praktyką. Może nawet zawieść w starych przeglądarkach, a nawet w niektórych współczesnych (zrewidowany post na forum wydaje się wskazywać, że Opera nie lubi adresów „javascript:”).

Lepszym rozwiązaniem byłby drugi sposób, aby umieścić javascript w onclickatrybucie, który jest ignorowany, jeśli nie jest dostępna żadna funkcja skryptowa. Umieść poprawny adres URL w polu href (zwykle „#”), aby utworzyć rezerwę dla tych, którzy nie mają javascript.

zombat
źródło
1
Nie widzę żadnej różnicy między hrefem „javascript:” a hrefem „#” z atrybutem onclick. Oba są równie bezużyteczne dla przeglądarek bez włączonej JS.
harto
2
harto, to nie jest poprawne. „#” oznacza wskaźnik dla nazwanego łącza, nie jest to identyfikator javascript. Jest to prawidłowy adres URL i nie wymaga rozpoznania Javascript.
zombat
8

działało dla mnie przy użyciu tego wiersza kodu:

<a id="LinkTest" title="Any Title"  href="#" onclick="Function(); return false; ">text</a>
Omar Yassin Carcelen
źródło
7

To działa

<a href="#" id="sampleApp" onclick="myFunction(); return false;">Click Here</a>
TitusMix
źródło
3
Witamy w Stack Overflow! Ten fragment kodu może rozwiązać pytanie, ale wyjaśnienie naprawdę pomaga poprawić jakość posta. Pamiętaj, że w przyszłości odpowiadasz na pytanie czytelników, a ci ludzie mogą nie znać przyczyn Twojej sugestii kodu. Staraj się również nie tłoczyć kodu objaśniającymi komentarzami, ponieważ zmniejsza to czytelność zarówno kodu, jak i objaśnień!
Do widzenia StackExchange
2
Ten kod nie działa. return: false jest nieprawidłowy. Powinien być zwracany fałsz.
hbulens
5

Osobiście uważam, że umieszczanie wywołań javascript w tagu HREF jest denerwujące. Zazwyczaj tak naprawdę nie zwracam uwagi na to, czy coś jest linkiem javascript, czy nie, i często chcę otwierać rzeczy w nowym oknie. Kiedy próbuję to zrobić za pomocą jednego z tego rodzaju linków, otrzymuję pustą stronę, na której nic nie ma, i javascript na pasku lokalizacji. Jest to jednak nieco pomijane przy użyciu onlick.

Piotr
źródło
3

Jeszcze jedna rzecz, którą zauważyłem podczas używania „href” z javascript:

Skrypt w atrybucie „href” nie zostanie wykonany, jeśli różnica czasu między 2 kliknięciami będzie dość krótka.

Na przykład spróbuj uruchomić następujący przykład i kliknij dwukrotnie (szybko!) Na każdym linku. Pierwszy link zostanie wykonany tylko raz. Drugie łącze zostanie wykonane dwukrotnie.

<script>
function myFunc() {
    var s = 0;
    for (var i=0; i<100000; i++) {
        s+=i;
    }
    console.log(s);
}
</script>
<a href="javascript:myFunc()">href</a>
<a href="#" onclick="javascript:myFunc()">onclick</a>

Reprodukcja w Chrome (podwójne kliknięcie) i IE11 (trzykrotne kliknięcie). W Chrome, jeśli klikniesz wystarczająco szybko, możesz wykonać 10 kliknięć i wykonać tylko jedną funkcję.

Firefox działa dobrze.

kolobok
źródło
3

Po pierwsze, wprowadzenie adresu URL href najlepiej jest ponieważ pozwala on użytkownikom kopiować linki, otwierać na innej karcie itp.

W niektórych przypadkach (np. Witryny z częstymi zmianami HTML) nie jest praktyczne wiązanie linków za każdym razem, gdy jest aktualizacja.

Typowa metoda wiązania

Normalny link:

<a href="https://www.google.com/">Google<a/>

I coś takiego dla JS:

$("a").click(function (e) {
    e.preventDefault();
    var href = $(this).attr("href");
    window.open(href);
    return false;
});

Zaletami tej metody są czyste oddzielenie znaczników i zachowania i nie trzeba powtarzać wywołań funkcji w każdym łączu.

Brak metody wiązania

Jeśli jednak nie chcesz wiązać się za każdym razem, możesz użyć onclick i przekazać element i zdarzenie, np .:

<a href="https://www.google.com/" onclick="return Handler(this, event);">Google</a>

A to dla JS:

function Handler(self, e) {
    e.preventDefault();
    var href = $(self).attr("href");
    window.open(href);
    return false;
}

Zaletą tej metody jest to, że możesz ładować nowe linki (np. Przez AJAX), kiedy chcesz, bez konieczności martwienia się o wiązanie za każdym razem.

jchavannes
źródło
1
 <hr>
            <h3 class="form-signin-heading"><i class="icon-edit"></i> Register</h3>
            <button data-placement="top" id="signin_student" onclick="window.location='signup_student.php'" id="btn_student" name="login" class="btn btn-info" type="submit">Student</button>
            <div class="pull-right">
                <button data-placement="top" id="signin_teacher" onclick="window.location='guru/signup_teacher.php'" name="login" class="btn btn-info" type="submit">Teacher</button>
            </div>
        </div>
            <script type="text/javascript">
                $(document).ready(function(){
                $('#signin_student').tooltip('show'); $('#signin_student').tooltip('hide');
                });
            </script>   
            <script type="text/javascript">
                $(document).ready(function(){
                $('#signin_teacher').tooltip('show'); $('#signin_teacher').tooltip('hide');
                });
            </script>   
Andrzej
źródło
0

Zauważyłem, że javascript: hrefs nie działał, gdy strona została osadzona w funkcji strony internetowej Outlooka, gdzie folder poczty jest ustawiony na wyświetlanie adresu URL

chrześcijanin
źródło