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 href
atrybucie (na przykład:
<a href="javascript:my_function();window.print();">....</a>
) vs. umieszczenie go w onclick
atrybucie (powiązanie go ze onclick
zdarzeniem)?
javascript
href
SkunkSpinner
źródło
źródło
Odpowiedzi:
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:
źródło
href
porównaniu inline wonclick
? 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.)zły:
dobrze:
lepszy:
jeszcze lepiej 1:
jeszcze lepiej 2:
Dlaczego lepiej ponieważ
return false
uniemoż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.
źródło
href
nie jest ustawione,#
ale na rzeczywisty link do przeglądarek noJS.Jeśli chodzi o javascript , jedną różnicą jest to, że
this
słowo kluczowe wonclick
module obsługi będzie odnosić się do elementu DOM, któregoonclick
atrybutem jest (w tym przypadku<a>
elementem), podczas gdythis
whref
atrybucie będzie odwoływał się dowindow
obiektu.Jeśli chodzi o prezentację , jeśli
href
atrybut nie występuje w łączu (tj.<a onclick="[...]">
), Wówczas domyślnie przeglądarki wyświetlajątext
kursor (a nie często pożądanypointer
kursor), 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 tegohref
w osobnym oknie za pomocą menu skrótów lub menu kontekstowego. Nie jest to możliwe przy określaniu akcji tylko za pośrednictwemonclick
.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:
źródło
używam
Daleka droga, ale załatwia sprawę. użyj stylu A, aby uprościć, a następnie:
źródło
nohref
atrybucie. 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 mojehref="JavaScript:void(0);"
przeznohref
. Wielkie dzięki. Twoje zdrowie.nohref
jest częściąarea
tagu, niea
! Twój przykład jest taki sam jak<a onClick="alert('Hello World')">HERE</a>
nohref
nie istnieje naa
tagu.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.
źródło
najlepszym sposobem na to jest:
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
aby to zrobić.
źródło
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.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ść. YMMVKolejny interesujący kawałek ...
onclick
ihref
zachowują się inaczej podczas bezpośredniego wywoływania javascript.onclick
przekażethis
kontekst poprawnie, podczas gdyhref
nie, 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łohref="javascript:void(0);"
dobrą miaręźródło
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
onclick
atrybucie, 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.źródło
działało dla mnie przy użyciu tego wiersza kodu:
źródło
To działa
źródło
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.
źródło
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.
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.
źródło
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:
I coś takiego dla JS:
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 to dla JS:
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.
źródło
źródło
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
źródło