função JavaScript resulta em recarregar a página HTML: por quê?

Question

questão Novato ...

O objetivo:

• Eu pretendo ter um campo de entrada de texto HTML como um tipo de entrada de linha de comando.

• Uma lista HTML não-ordenada mostra os 5 comandos mais recentes. Clicando em um dos últimos comandos nesta lista deve preencher o campo de texto de entrada de linha de comando com o respectivo comando (para re-executar ou modificá-lo).

• Uma lista HTML não-ordenada contém um conjunto de resultados. Ao clicar em um ID na lista deve trazer o respectivo ID no campo de texto de entrada da linha de comando.

Em HTML (DHTML): Funciona como esperado:. Ao clicar no link o campo de texto de entrada de linha de comando é preenchida com um 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>

arquivo em JavaScript: não funciona como esperado: ao clicar no link da linha de comando de entrada de texto-campo é preenchido com o respectivo valor (como deveria), mas depois parece que a página HTML completo está sendo recarregada, o texto campo de entrada e todas as listas povoadas dinamicamente tornar-se vazia.

    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;});
}

Agora a pergunta: Além de um possível erro Javascript (sintaxe), o que poderia fazer com que o navegador para recarregar a página?

Answer 1

Mudança

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

para

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

e na função, chamada

evt.preventDefault();

Answer 2

Em ambos os casos, você não faz nada para cancelar a função padrão de clicar em um link.

No exemplo HTML simples, o link para o topo da página é seguido.

Você não especificar o que o atributo href para o segundo exemplo parece, mas seja o que for, ele será seguido.

http://icant.co.uk/articles/pragmatic-progressive -enhancement / para uma boa explicação do evento cancelamento e design de eventos bom. Consulte http://docs.jquery.com/Tutorials:How_jQuery_Works para alguma orientação jQuery específico.

Answer 3

Parece que você apenas seguir o URL de destino da ligação. Isso é porque você não impedem a ação padrão clique:

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

Como alternativa, você pode configurar a href começando com #, ou não usar elemento <a> em tudo (<span style="cursor:pointer"> uso em vez.) - se não é uma ligação real é claro

Answer 4

É basicamente relativas ao cancelamento de evento ... Tente isto:

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

Answer 5

Enquanto as outras respostas aqui são excelentes pontos sobre eventos cancelamento, você ainda vai ter problemas se o seu JavaScript contém erros que impedem o seu código de cancelamento de evento que está sendo executado. (Como pode ser o caso se você está, digamos, depuração do código .

Como uma precaução adicional, eu recomendo fortemente que você não uso href="#" em links que apenas scripts de gatilho. Em vez disso, use o operador void:

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

A razão para isto é: quando o evento não for cancelado, o navegador irá tentar carregar o URL fornecido pelo atributo href. O "protocolo" javascript: diz ao navegador para passar a usar o valor do código que acompanha a menos que o valor é undefined . O operador void existe explicitamente para retornar undefined , assim as estadias do navegador na página existente - sem recarga / actualização -. permitindo-lhe continuar a depuração seu script

Isso também permite que você ignore toda a confusão com cancelamento de evento para JS somente ligações (embora você ainda vai precisar cancelar eventos no código anexado aos links que têm um URL "fallback" para clientes não-JS).