Qual é o efeito de adicionar 'return false' a um ouvinte de evento de clique?

Muitas vezes eu vi links como esses em páginas HTML:

<a href='#' onclick='someFunc(3.1415926); return false;'>Click here !</a>

Qual é o efeito do return falselá dentro?

Além disso, normalmente não vejo isso nos botões.

Isso está especificado em algum lugar? Em algumas especificações no w3.org?

O valor de retorno de um manipulador de eventos determina se o comportamento padrão do navegador também deve ocorrer. No caso de clicar em links, isso seria seguir o link, mas a diferença é mais perceptível nos manipuladores de envio de formulários, onde você pode cancelar um envio de formulário se o usuário cometer um erro ao inserir as informações.

Não acredito que exista uma especificação W3C para isso. Todas as interfaces JavaScript antigas como essa receberam o apelido "DOM 0" e, na maioria das vezes, não são especificadas. Você pode ter alguma sorte lendo a documentação antiga do Netscape 2.

A maneira moderna de obter esse efeito é chamar event.preventDefault(), e isso é especificado na especificação de Eventos do DOM 2 .

Você pode ver a diferença com o seguinte exemplo:

<a href="http://www.google.co.uk/" onclick="return (confirm('Follow this link?'))">Google</a>

Clicar em "Ok" retorna verdadeiro e o link é seguido. Clicar em "Cancelar" retorna falso e não segue o link. Se o javascript estiver desativado, o link será seguido normalmente.

Aqui está uma rotina mais robusta para cancelar o comportamento padrão e a ocorrência de bolhas em todos os navegadores:

// Prevents event bubble up or any usage after this is called.
eventCancel = function (e)
{
    if (!e)
        if (window.event) e = window.event;
    else return;
    if (e.cancelBubble != null) e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
    if (e.preventDefault) e.preventDefault();
    if (window.event) e.returnValue = false;
    if (e.cancel != null) e.cancel = true;
}

Um exemplo de como isso seria usado em um manipulador de eventos:

// Handles the click event for each tab
Tabstrip.tabstripLinkElement_click = function (evt, context) 
{
    // Find the tabStrip element (we know it's the parent element of this link)
    var tabstripElement = this.parentNode;
    Tabstrip.showTabByLink(tabstripElement, this);
    return eventCancel(evt);
}

O que "retornar falso" realmente está fazendo?

return false está realmente fazendo três coisas muito separadas quando você o chama:

1. event.preventDefault ();
2. event.stopPropagation ();
3. Pára a execução de retorno de chamada e retorna imediatamente quando chamado.

Veja jquery-events-stop-misusing-return-false para obter mais informações.

Por exemplo :

ao clicar neste link, return false cancelará o comportamento padrão do navegador .

<a href='#' onclick='someFunc(3.1415926); return false;'>Click here !</a>

Retunhar falso de um evento JavaScript geralmente cancela o comportamento "padrão" - no caso de links, ele diz ao navegador para não seguir o link.

Eu acredito que faz com que o evento padrão não aconteça.

No seu exemplo, o navegador não tentará ir para #.

Return false interromperá o acompanhamento do hiperlink após a execução do javascript. Isso é útil para javascript discreto que degrada normalmente - por exemplo, você pode ter uma imagem em miniatura que usa javascript para abrir um pop-up da imagem em tamanho normal. Quando o javascript está desativado ou a imagem é clicada no meio (aberta em uma nova guia), isso ignora o evento onClick e apenas abre a imagem normalmente como uma imagem em tamanho normal.

Se return false não fosse especificado, a imagem iniciaria o pop-up e abriria a imagem normalmente. Algumas pessoas, em vez de usar o retorno false, usam o javascript como atributo href, mas isso significa que quando o javascript está desativado, o link não faz nada.

usar return false em um evento onclick impede que o navegador processe o restante da pilha de execução, o que inclui seguir o link no atributo href.

Em outras palavras, adicionar return false impede que o href funcione. No seu exemplo, é exatamente isso que você deseja.

Nos botões, não é necessário porque onclick é tudo o que será executado - não há href para processar e acessar.

O retorno false está dizendo para não executar a ação padrão, que no caso de um <a href>é seguir o link. Quando você retornar falso ao onclick, o href será ignorado.

Hack de navegador: http://jszen.blogspot.com/2007/03/return-false-to-prevent-jumping.html

Return false impedirá a navegação. Caso contrário, o local se tornaria o valor de retorno de someFunc

Os return falseimpede que a página que está sendo navegada e rolagem indesejada de uma janela para a parte superior ou inferior.

onclick="return false"

Estou surpreso que ninguém mencionou em onmousedownvez de onclick. o

onclick='return false'

não pegar o comportamento padrão do navegador resultando em seleção (às vezes indesejada) texto ocorrendo há mousedownmas

onmousedown='return false'

faz.

Em outras palavras, quando clico em um botão, seu texto algumas vezes é selecionado acidentalmente, alterando a aparência do botão, o que pode ser indesejável. Esse é o comportamento padrão que estamos tentando impedir aqui. No entanto, o mousedownevento é registrado antes click, portanto, se você impedir apenas esse comportamento dentro do seu clickmanipulador, ele não afetará a seleção indesejada resultante do mousedownevento. Portanto, o texto ainda é selecionado. No entanto, a prevenção do padrão para o mousedownevento fará o trabalho.

Consulte também event.preventDefault () vs. return false

Eu tenho este link na minha página HTML:

<a href = "" 
onclick = "setBodyHtml ('new content'); return false; "
> click here </a>

A função setBodyHtml () é definida como:

function setBodyHtml (s)
{ document.body.innerHTML = s;
}

Quando clico no link, o link desaparece e o texto mostrado no navegador muda para "novo conteúdo".

Mas se eu remover o "false" do meu link, clicar no link (aparentemente) não fará nada. Por que é que?

É porque, se eu não retornar falso, o comportamento padrão de clicar no link e exibir sua página de destino acontecerá, não será cancelado. MAS, aqui o href do hiperlink é "" assim que ele volta para a MESMA página atual. Portanto, a página é efetivamente atualizada e aparentemente nada acontece.

Em segundo plano, a função setBodyHtml () ainda é executada. Ele atribui seu argumento a body.innerHTML. Mas como a página é atualizada / recarregada imediatamente, o conteúdo do corpo modificado não fica visível por mais do que alguns milissegundos, talvez, portanto não a vejo.

Este exemplo mostra por que às vezes é útil usar "return false".

Desejo atribuir ALGUM href ao link, para que ele apareça como um link, como texto sublinhado. Mas não quero que o clique no link efetivamente recarregue a página. Eu quero que a navegação padrão = comportamento seja cancelada e quaisquer efeitos colaterais causados ​​pela chamada da minha função para entrar em vigor. Portanto, devo "retornar falso".

O exemplo acima é algo que você experimentaria rapidamente durante o desenvolvimento. Para produção, é mais provável que você atribua um manipulador de cliques em JavaScript e chame preventDefault (). Mas, para uma rápida tentativa, o "retorno falso" acima faz o truque.

Ao usar formulários, podemos usar 'return false' para impedir o envio.

function checkForm() {
    // return true to submit, return false to prevent submitting
}
<form onsubmit="return checkForm()">
    ...
</form>