La funzione Javascript comporta il ricaricamento della pagina HTML:Perché?

Question

Domanda da principiante...

L'obiettivo:

• Intendo avere un campo di input di testo HTML come una sorta di input da riga di comando.

• Un elenco HTML non ordinato mostra i 5 comandi più recenti.Facendo clic su uno degli ultimi comandi in questo elenco, il campo di testo di input della riga di comando dovrebbe essere compilato con il rispettivo comando (per poterlo rieseguire o modificare).

• Un elenco HTML non ordinato contiene un set di risultati.Facendo clic su un ID in questo elenco si dovrebbe portare il rispettivo ID nel campo di testo di input della riga di comando.

In HTML (DHTML):Funziona come previsto:quando si fa clic sul collegamento, il campo di testo di input della riga di comando viene popolato con un comando recente.

<li><a href="#" id="last_cmd_01" onclick="document.getElementById('cli_input').value = document.getElementById('last_cmd_01').firstChild.nodeValue;document.getElementById('cli_input').focus()">here would be one of the recent commands</a></li>

Nel file Javascript:Non funziona come previsto:quando si fa clic sul collegamento, il campo di testo di input della riga di comando viene popolato con il rispettivo valore (come dovrebbe), MA sembra che venga ricaricata l'intera pagina HTML, il campo di input di testo e tutti gli elenchi popolati dinamicamente diventare vuoto.

    function exec_cmd(cli_input_str) {
// a lot of code ...
// the code that should provide similar behavior as onclick=... in the DHTML example
$('.spa_id_href').click(function(){document.getElementById('cli_input').value = document.getElementById('cli_input').value + this.firstChild.nodeValue;});
}

Ora la domanda:Oltre a un potenziale errore Javascript (sintassi), cosa potrebbe causare il ricaricamento della pagina da parte del browser?

Answer 1

Modifica

$('.spa_id_href').click(function(){...

A

$('.spa_id_href').click(function(evt){...//notice the evt param

e nella funzione, chiama

evt.preventDefault();

Answer 2

In entrambi i casi, non si fa nulla per annullare la funzione di default di cliccare su un link.

Nell'esempio HTML pianura, il link alla parte superiore della pagina è seguito.

Non si specifica quanto l'attributo href per il secondo esempio assomiglia, ma qualunque cosa sia, sarà seguito.

http://icant.co.uk/articles/pragmatic-progressive -Rafforzamento / per una buona spiegazione di annullamento dell'evento e buona progettazione di eventi. Vedere http://docs.jquery.com/Tutorials:How_jQuery_Works per alcune indicazioni specifiche jQuery.

Answer 3

Sembra che basta seguire l'URL di destinazione di collegamento. Questo perché non si impedisce l'azione di default clic:

e.preventDefault(); // `e` is the object passed to the event handler
// or
return false

In alternativa, è possibile impostare a href partendo #, o non usare elemento <a> affatto (uso <span style="cursor:pointer"> invece) - se non è un vero e proprio collegamento, naturalmente

.

Answer 4

E 'fondamentalmente legato alla manifestazione la cancellazione ... Prova questo:

try { (
   e || window.event).preventDefault(); 
} 
 catch( ex ) 
{ 
 /* do Nothing */ 
}

Answer 5

Mentre le altre risposte qui fanno ottimi punti sulla disdetta eventi, si continua a incorrere in problemi se il tuo JavaScript contiene degli errori che impediscono il codice a cancellazione dell'evento da in esecuzione. (Come potrebbe essere il caso se si è, diciamo, il debug del codice .

Come ulteriore precauzione, vi consigliamo caldamente di non l'uso href="#" sui link che innescano solo script. Invece, usare l'operatore void:

<a href="javascript:void(0)" onclick="...">...</a>

La ragione di questo è: quando l'evento non viene annullato, il browser tenterà di caricare l'URL fornito dall'attributo href. Il javascript: "protocollo" indica al browser di utilizzare invece il valore del codice di accompagnamento a meno che il valore è undefined . L'operatore void esiste esplicitamente di tornare undefined , così il browser rimane sulla pagina esistente - senza Ricarica / Aggiorna -. che consente di continuare il debug dello script

Questo permette anche di saltare l'intero pasticcio a cancellazione di eventi per JS-solo i collegamenti (anche se sarà ancora bisogno di cancellare gli eventi in codice allegato ai collegamenti che hanno un URL "ripiego" per i clienti non-JS).