Link do kotwicy HTML - oba href i onclick?

93

Chcę napisać tag kotwicy, który wykonuje część JavaScript, a następnie przechodzi do miejsca, w którym hrefgo zabiera. Wywołanie funkcji, która wykonuje mój JavaScript, a następnie ustawia window.locationlub top.locationdo hreflokalizacji, nie działa dla mnie.

Więc wyobraź sobie, że mam na stronie element o identyfikatorze „Foo”. Chcę napisać kotwicę podobną do:

<a href="#Foo" onclick="runMyFunction(); return false;">Do it!</a>

Po kliknięciu na to chcę wykonać runMyFunction, a następnie przeskoczyć do strony #Foo(nie powoduje przeładowania - użycie top.locationspowoduje ponowne załadowanie strony).

Propozycje? Z przyjemnością używam jQuery, jeśli może tu pomóc ...

javascript jquery html anchor psychotik
źródło
return true;jest rozwiązaniem, ale możesz też zadzwonić location.hash = '#Foo'. Nie spowoduje to ponownego załadowania strony.
shuangwhywhy

Odpowiedzi:

135

Wystarczy return truezamiast?

Wartość zwracana z onClickkodu jest tym, co określa, czy nieodłączna akcja kliknięcia linku jest przetwarzana, czy nie - zwracanie falseoznacza, że ​​nie jest przetwarzane, ale jeśli wrócisz, trueprzeglądarka rozpocznie przetwarzanie po powrocie funkcji i przejdzie do właściwego Kotwica.

Bursztyn
źródło
1
Co jeśli onclick nic nie zwraca?
maciek
1
@maciek, wówczas wartość zwracana jest traktowana jako undefinedfałszywa do tych celów.
Bursztyn
1
W przeszłości za każdym razem, gdy korzystałem z funkcji js do uruchamiania nowej strony i wstawiałem tylko „#” dla atrybutu href, zwracałem „-1”, aby zapobiec domyślnej akcji, którą jest zwykle skakanie przeglądarki do góry strony, a czasem po prostu nic nie zwracałem. Ostatnio musiałem zrewidować wszystkie te strony, tak jak radził @Amber ... aby konkretnie zwrócić fałsz, jeśli nie chcę, aby strona przeskakiwała.
Randy
2
@Amber wydaje się, że jeśli onclick nic nie zwróci, zostanie przetworzona właściwa akcja kliknięcia linku.
iplus26,
Nie należy również używać zdarzenia event.preventDefault () do obsługi zdarzeń kliknięcia.
Ruben
36 
<a href="#Foo" onclick="return runMyFunction();">Do it!</a>

i

function runMyFunction() {
  //code
  return true;
}

W ten sposób wykonasz swoją funkcję ORAZ będziesz podążać za odsyłaczem ORAZ będziesz podążać za odsyłaczem dokładnie po pomyślnym uruchomieniu funkcji.

n1313
źródło
1
Wydaje się, że nie działa, jeśli funkcja zwraca wartość true po odroczonym wywołaniu funkcji?
DavidVdd
7

Jeśli łącze powinno zmienić lokalizację tylko wtedy, gdy wykonanie funkcji zakończyło się pomyślnie, zrób, onclick="return runMyFunction();"aw funkcji zwróciłbyś wartość true lub false.

Jeśli chcesz tylko uruchomić funkcję, a następnie pozwolić tagowi kotwicy wykonać swoje zadanie, po prostu usuń return falseinstrukcję.

Na marginesie, prawdopodobnie powinieneś zamiast tego użyć programu obsługi zdarzeń, ponieważ wbudowany JS nie jest optymalnym sposobem robienia rzeczy.

peirix
źródło
0

Podczas tworzenia czystej Struktury HTML możesz tego użyć.

//Jquery Code
$('a#link_1').click(function(e){
  e . preventDefault () ;
  var a = e . target ;
  window . open ( '_top' , a . getAttribute ('href') ) ;
});

//Normal Code
element = document . getElementById ( 'link_1' ) ;
element . onClick = function (e) {
  e . preventDefault () ;
  
  window . open ( '_top' , element . getAttribute ('href') ) ;
} ;
<a href="#Foo" id="link_1">Do it!</a>
Rozwiń fragment

Carl James Omandam
źródło