Link di ancoraggio HTML - href e onclick entrambi?

93

Voglio creare un tag di ancoraggio che esegua un po 'di JavaScript e quindi proceda per andare dove lo hrefstava prendendo. Invocare una funzione che esegue il mio JavaScript e quindi imposta window.locationo top.locationsulla hrefposizione non funziona per me.

Quindi, immagina di avere un elemento con ID "Foo" sulla pagina. Voglio creare un'ancora simile a:

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

Quando si fa clic su questo, voglio eseguire runMyFunction e quindi saltare la pagina a #Foo(non causare un ricaricamento - l'utilizzo top.locationcauserebbe il ricaricamento della pagina).

Suggerimenti? Sono felice di usare jQuery se può aiutare qui ...

— psychotik
fonte

return true;è la soluzione, ma puoi anche chiamare location.hash = '#Foo'. Non ricaricherà la pagina.

— shuangwhywhy

130

Solo return trueinvece?

Il valore restituito dal onClickcodice è ciò che determina se l'azione intrinseca del collegamento su cui si è fatto clic viene elaborata o meno: restituire falsesignifica che non viene elaborata, ma se torni, trueil browser procederà a elaborarla dopo che la funzione ritorna e andrà alla corretta ancora.

— Ambra
fonte

1

Cosa succede se onclick non restituisce nulla?

— maciek

1

@maciek quindi il valore restituito undefinedviene considerato falso per questi scopi.

— Amber

1

In passato, ogni volta che utilizzavo una funzione js per avviare una nuova pagina e mettevo solo un "#" per l'attributo href, restituivo "-1" per impedire l'azione predefinita, che di solito è il salto del browser in cima alla pagina, oa volte semplicemente non restituivo nulla. Ultimamente ho dovuto rivedere tutte quelle pagine come consigliato da @Amber ... per restituire specificamente false, se non voglio che la pagina salti.

— Randy

1

@Amber sembra che se onclick non restituisce nulla, verrà elaborata l'azione intrinseca del collegamento cliccato.

— iplus26

Inoltre non dovresti usare event.preventDefault () sul gestore di eventi click.

— Ruben

36

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

e

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

In questo modo avrai la funzione eseguita E seguirai il collegamento E seguirai il collegamento esattamente dopo che la funzione è stata eseguita con successo.

— n1313
fonte

1

Non sembra funzionare se la tua funzione restituisce true dopo una chiamata di funzione differita?

— DavidVdd

7

Se il collegamento dovesse cambiare la posizione solo se la funzione eseguita ha successo, allora fallo onclick="return runMyFunction();"e nella funzione restituirai vero o falso.

Se vuoi solo eseguire la funzione e lasciare che il tag di ancoraggio faccia il suo lavoro, rimuovi semplicemente l' return falseistruzione.

Come nota a margine, dovresti probabilmente usare invece un gestore di eventi, poiché inline JS non è un modo molto ottimale di fare le cose.

— peirix
fonte

0

Quando si esegue una struttura HTML pulita, è possibile utilizzarla.

//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>

Espandi lo snippet

— Carl James Omandam
fonte