event.preventDefault () vs. return false


2960

Quando quero impedir que outros manipuladores de eventos sejam executados após um determinado evento ser disparado, posso usar uma das duas técnicas. Vou usar o jQuery nos exemplos, mas isso também se aplica ao JS simples:

1 event.preventDefault()

$('a').click(function (e) {
    // custom handling here
    e.preventDefault();
});

2) return false

$('a').click(function () {
    // custom handling here
    return false;
});

Existe alguma diferença significativa entre esses dois métodos para interromper a propagação de eventos?

Para mim, return false;é mais simples, mais curto e provavelmente menos propenso a erros do que executar um método. Com o método, você deve se lembrar sobre invólucro, parênteses etc.

Além disso, eu tenho que definir o primeiro parâmetro no retorno de chamada para poder chamar o método. Talvez, existam algumas razões pelas quais eu deveria evitar fazê-lo dessa maneira e usá-lo preventDefault? Qual é a melhor maneira?


172
Note-se que jQuery de preventDefaultque não impede que outros diretos de execução. É para isso que stopImmediatePropagationserve.
Crescent Fresh

19
@CrescentFresh, impede que outros manipuladores (posteriormente ligados) executem ... no nó DOM no qual o evento é acionado. Apenas não impede a propagação.
Eyelidlessness 17/10/11

37
Esses não são "dois métodos para interromper a propagação de eventos?" e.preventDefault (); impede a ação padrão, ela não para a propagação de eventos, feita por e.stopPropagation ().
Timo Tijhof

24
Esta pergunta e suas respostas são sobre jQuery. Se você veio aqui procurando uma resposta javascript simples, consulte event.preventDefault () false vs. de retorno (sem jQuery)
Oriol

5
Esta resposta tem uma tabela explicando tudo stackoverflow.com/a/5302939/759452
Adrien Seja

Respostas:


2818

return falsede dentro de um manipulador de eventos jQuery é efetivamente o mesmo que chamar ambos e.preventDefaulte e.stopPropagationo objeto jQuery.Event transmitido .

e.preventDefault() impedirá que o evento padrão ocorra, e.stopPropagation() impedirá que o evento borbulhe e return falsefará as duas coisas. Observe que esse comportamento difere normais (não-jQuery) manipuladores de eventos, em que, nomeadamente, return falsefaz não parar o evento de borbulhando.

Fonte: John Resig

Algum benefício em usar event.preventDefault () em vez de "return false" para cancelar um clique href?


126
return falsede um manipulador DOM2 ( addEventListener) não faz nada (não impede o padrão nem para de borbulhar; de um manipulador Microsoft DOM2-ish ( attachEvent), impede o padrão, mas não borbulha; de um manipulador DOM0 ( onclick="return ..."), impede o padrão (fornecido você inclui o returnatributo in), mas não borbulha; de um manipulador de eventos jQuery, ele faz as duas coisas, porque isso é uma coisa do jQuery Detalhes e testes ao vivo aqui
TJ Crowder

12
Seria útil definir "Propagação" e "Padrão" aqui. Eu continuo confundindo-os. Isso está correto? Propagação = meu código (manipuladores de eventos JavaScript para elementos pai). Padrão = código do navegador (links, seleção de texto etc.)
Bob Stein

5
o que realmente significa dizer borbulhar? exemplo?
Govinda Sakhare 17/08/16

5
+1 para notar que return falsese não parar a propagação do evento em manipuladores de eventos não-jQuery. isto <a href="#" onclick="return false">Test</a>é, não impede que o evento borbulhe.
Doug S

424

Pela minha experiência, há pelo menos uma vantagem clara ao usar event.preventDefault () sobre o retorno de false. Suponha que você esteja capturando o evento click em uma tag de âncora, caso contrário, seria um grande problema se o usuário fosse navegado para fora da página atual. Se o seu manipulador de cliques usar return false para impedir a navegação no navegador, ele abrirá a possibilidade de o intérprete não alcançar a declaração de retorno e o navegador continuará executando o comportamento padrão da tag anchor.

$('a').click(function (e) {
  // custom handling here

  // oops...runtime error...where oh where will the href take me?

  return false;
});

O benefício de usar event.preventDefault () é que você pode adicioná-lo como a primeira linha no manipulador, garantindo assim que o comportamento padrão da âncora não seja acionado, independentemente se a última linha da função não for atingida (por exemplo, erro de tempo de execução )

$('a').click(function (e) {
  e.preventDefault();

  // custom handling here

  // oops...runtime error, but at least the user isn't navigated away.
});

68
Enquanto verdade, o comportamento oposto é frequentemente preferível ao fazer melhoria progressiva (que eu acho que é provavelmente a razão mais provável de ser substituindo uma ação padrão)
meandmycode

Ambas são maneiras de bloquear o comportamento padrão de um evento, é apenas uma questão de qual problema você está tentando resolver.
Ferkze

102

Esta não é, como você a intitulou, uma pergunta "JavaScript"; é uma pergunta sobre o design do jQuery.

O jQuery e a citação anteriormente vinculada de John Resig (na mensagem de karim79 ) parecem ser o mal-entendido de como os manipuladores de eventos em geral funcionam.

Fato: Um manipulador de eventos que retorna false impede a ação padrão para esse evento. Não para a propagação do evento. Os manipuladores de eventos sempre funcionaram dessa maneira, desde os tempos antigos do Netscape Navigator.

A documentação do MDN explica como funciona return falseem um manipulador de eventos

O que acontece no jQuery não é o mesmo que acontece com os manipuladores de eventos. Os ouvintes de eventos DOM e os eventos "anexados" do MSIE são uma questão totalmente diferente.

Para obter mais informações, consulte attachEvent no MSDN e a documentação do W3C DOM 2 Events .


6
@rds Diz que "preventDefault não interrompe a propagação do evento por meio do DOM. event.stopPropagation deve ser usado para isso."
Garrett

Uma resposta a uma pergunta intimamente relacionada alega que, antes do HTML 5, o retorno falso de um manipulador de eventos não era especificado como algo que fazia alguma coisa. Agora, talvez essa seja uma interpretação incorreta da especificação (difícil de entender) ou talvez, apesar de não ter sido especificada literalmente, todos os navegadores tenham interpretado return falseo mesmo que event.preventDefault(). Mas eu não sei; é o suficiente para me fazer tomar isso com uma pitada de sal.
Mark Amery

9
Eu odeio como todos os resultados de pesquisa javascript no google são realmente sobre jQuery, +1
Alexander Derck 11/16

Ele o marcou como JavaScript e jQuery, e ambos estão corretos. jQueryé apenas um subconjunto de JavaScript, não sua própria linguagem.
ProfK 28/01


57

Ao usar o jQuery, você return falsefaz três coisas 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.

Consulte Eventos do jQuery: Pare (Mis) usando Return False para obter mais informações e exemplos.


Se outras partes do código estiverem ouvindo esse evento, event.stopPropagation (); cancelará o retorno de chamada?
Ferkze 03/02

41

Você pode pendurar muitas funções no onClickevento para um elemento. Como você pode ter certeza de que falseaquele será o último a disparar? preventDefaultpor outro lado, impedirá definitivamente apenas o comportamento padrão do elemento.


20

eu acho que

event.preventDefault()

é a maneira especificada pelo w3c de cancelar eventos.

Você pode ler isso na especificação do W3C em Cancelamento de evento .

Além disso, você não pode usar return false em todas as situações. Ao atribuir uma função javascript no atributo href e se você retornar false, o usuário será redirecionado para uma página com a string falsa gravada.


4
Não em nenhum navegador que eu já conheci. Talvez você confunda isso com <a href="javascript:return false"algo assim?
mplungjan

10
-1; a afirmação de que um href que retorna false gerará uma página de texto com a palavra "false" escrita nela é um absurdo completo.
Mark Amery

1
(menos) 1; Ligação quebrada + disparate completo
Phil

15

Eu acho que a melhor maneira de fazer isso é usar, event.preventDefault()porque se alguma exceção for levantada no manipulador, a falsedeclaração de retorno será ignorada e o comportamento será oposto ao que você deseja.

Mas se você tiver certeza de que o código não acionará nenhuma exceção, poderá seguir o método que desejar.

Se você ainda deseja acompanhar o retorno false, pode colocar todo o código do manipulador em um bloco try catch como abaixo:

$('a').click(function (e) {
  try{
      your code here.........
  }
   catch(e){}
  return false;
});

1

Minha opinião da minha experiência dizendo que é sempre melhor usar

event.preventDefault() 

Praticamente para parar ou impedir o envio de eventos, sempre que solicitamos, em vez de return false event.preventDefault()funcionar bem.


11
Melhor porque? Você literalmente deu justificativa zero aqui. -1.
Mark Amery

No caso de haver várias ligações de eventos, e.preventDefault () é mais direcionado do que retornar false.
Taiger 22/08

preventDefaulté algumas palavras em inglês eu entendo "impede o padrão". return falsesão algumas palavras em inglês que eu entendo "retorna falso", mas não tenho idéia do porquê até pesquisar no Google esse código enigmático. E bônus, eu posso controlar separadamente stopPropagatione preventDefault .
Joan

1

A principal diferença entre return falsee event.preventDefault()é que seu código abaixo return falsenão será executado e emevent.preventDefault() caso seja executado após esta instrução.

Quando você escreve return false, faz o seguinte para você nos bastidores.

* Stops callback execution and returns immediately when called.
* event.stopPropagation();
* event.preventDefault();

1

e.preventDefault ();

Simplesmente interrompe a ação padrão de um elemento.

Instância Ex .:

impede que o hiperlink siga o URL, impede que o botão enviar envie o formulário. Quando você tem muitos manipuladores de eventos e deseja apenas impedir que eventos padrão ocorram e ocorram várias vezes, precisamos usar na parte superior da função ().

Razão:-

A razão para usar e.preventDefault();é que, em nosso código, para que algo dê errado no código, ele permitirá a execução do link ou formulário a ser enviado ou a execução ou permissão de qualquer ação que você precise executar. O botão & link ou submit será enviado e ainda permitirá a propagação do evento.

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <a href="https://www.google.com" onclick="doSomethingElse()">Preventsss page from redirect</a>
      <script type="text/javascript">
         function doSomethingElse(){
           console.log("This is Test...");
         }
         $("a").click(function(e){
          e.preventDefault(); 
         });
      </script>
   </body>
</html>

retorna falso;

Simplesmente interrompe a execução da função ().

" return false;" encerrará toda a execução do processo.

Razão:-

O motivo para usar return false; é que você não deseja mais executar a função no modo estrito.

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <a href="#" onclick="returnFalse();">Blah</a>
      <script type="text/javascript">
         function returnFalse(){
         console.log("returns false without location redirection....")
             return false;
             location.href = "http://www.google.com/";
         
         }
      </script>
   </body>
</html>


1

Basicamente, dessa maneira, você combina as coisas porque o jQuery é uma estrutura que se concentra principalmente nos elementos HTML, basicamente impedindo o padrão, mas, ao mesmo tempo, interrompe a propagação para aumentar.

Então, podemos simplesmente dizer, retornar false in jQueryé igual a:

return false é e.preventDefault AND e.stopPropagation

Mas também não esqueça que tudo está nas funções relacionadas ao jQuery ou DOM, quando você o executa no elemento, basicamente impede que tudo seja acionado, incluindo o comportamento padrão e a propagação do evento.

Basicamente, antes de começar a usar return false;, primeiro entenda o que fazer e.preventDefault();e e.stopPropagation();, se você acha que precisa dos dois ao mesmo tempo, basta usá-lo.

Então, basicamente, este código abaixo:

$('div').click(function () {
  return false;
});

é igual a este código:

$('div').click(function (event) {
  event.preventDefault();
  event.stopPropagation();
});

1

Da minha experiência, event.stopPropagation () é usado principalmente em efeitos CSS ou em trabalhos de animação, por exemplo, quando você tem um efeito de passar o mouse para o cartão e o elemento do botão, quando passa o mouse sobre o botão, o efeito de passar o cartão e os botões será acionado nesse caso , você pode usar event.stopPropagation () para interromper as ações de bolhas e event.preventDefault () serve para impedir o comportamento padrão das ações do navegador. Por exemplo, você possui um formulário, mas definiu apenas o evento de clique para a ação de envio, se o usuário enviar o formulário pressionando enter, o navegador acionado pelo evento de pressionamento de tecla, e não o evento de clique aqui, você deverá usar event.preventDefault () para evitar inadequações comportamento. Não sei o que diabos é voltar falso; Para mais esclarecimentos, visite este link e brinque com a linha 33https://www.codecademy.com/courses/introduction-to-javascript/lessons/requests-i/exercises/xhr-get-request-iv

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.