javascript - w3s - return event




event.preventDefault() vs. retorno falso (8)

Quando eu quero impedir que outros manipuladores de eventos sejam executados depois que um determinado evento é 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 de parar 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ê tem que lembrar sobre o case correto, parênteses, etc.

Além disso, 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 fazer assim e usar preventDefault vez disso? Qual é o melhor caminho?


A principal diferença entre return false e event.preventDefault() é que seu código abaixo return false não será executado e em event.preventDefault() caso seu código será executado após esta declaração.

Quando você escreve return false, faz as seguintes coisas para você nos bastidores.

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

Ao usar o jQuery, return false está fazendo 3 coisas separadas quando você o chama:

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

Veja Eventos jQuery: Pare (Des) Usando o Return False para mais informações e exemplos.


De minha experiência, há pelo menos uma vantagem clara ao usar event.preventDefault () sobre o uso de return false. Suponha que você esteja capturando o evento click em uma tag âncora, caso contrário, seria um grande problema se o usuário fosse navegado para fora da página atual. Se o manipulador de cliques usar return false para impedir a navegação do navegador, ele abre a possibilidade de que o interpretador não atinja a declaração de retorno e o navegador continuará a executar o comportamento padrão da marca de âncora.

$('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 incluir isso como a primeira linha no manipulador, garantindo que o comportamento padrão da âncora não seja disparado, independentemente da última linha da função não ser 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.
});

Eu acho que a melhor maneira de fazer isso é usar event.preventDefault() porque se alguma exceção é levantada no manipulador, a instrução false 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, você pode usar qualquer método que desejar.

Se você ainda quiser ir com o retorno false , então você pode colocar todo o código do seu handler em um bloco try catch como abaixo:

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

Isso não é, como você chamou, uma questão "JavaScript"; é uma questão sobre o design do jQuery.

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

Fato: Um manipulador de eventos que retorna false impede a ação padrão desse 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 o return false em um manipulador de eventos funciona

O que acontece no jQuery não é o mesmo que acontece com os manipuladores de eventos. Ouvintes de eventos DOM e eventos "anexados" do MSIE são completamente diferentes.

Para ler mais, consulte attachEvent no MSDN e a documentação de eventos do W3C DOM 2 .


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

event.preventDefault() 

Praticamente para parar ou impedir o envio de evento, sempre que for necessário, em vez de return false event.preventDefault() funciona bem.


eu acho que

event.preventDefault()

é a forma especificada do w3c de cancelar eventos.

Você pode ler isso na especificação do W3C sobre o cancelamento do evento .

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


return false de dentro de um manipulador de eventos jQuery é efetivamente o mesmo que chamar e.preventDefault e e.stopPropagation no objeto jQuery.Event passado .

e.preventDefault() impedirá que o evento padrão e.stopPropagation() , e.stopPropagation() impedirá que o evento e.stopPropagation() e return false fará ambos. Observe que esse comportamento difere dos manipuladores de eventos normais (não-jQuery), nos quais, notavelmente, return false não impede que o evento borbulhe.

Fonte: John Resig

Qualquer benefício de usar event.preventDefault () sobre "return false" para cancelar um clique href?





event-propagation