event.preventDefault () vs. return false

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?

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?

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

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 .

Geralmente, sua primeira opção ( preventDefault()) é a que você deve escolher, mas você precisa saber em que contexto está e quais são seus objetivos.

Abasteça sua codificação tem um grande artigo sobre return false;vs event.preventDefault()vs event.stopPropagation()vsevent.stopImmediatePropagation() .

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.

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.

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.

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

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.

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

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>

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

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