javascript - que - ¿Cuándo usar PreventDefault() vs Return false?

stoppropagation

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cuál es la diferencia entre event.stopPropagation y event.preventDefault? 7 respuestas

En primer lugar, en el modelo de eventos de JavaScript, se encontrará con un concepto denominado como burbujeo de eventos (que hace que un evento se propague de un elemento secundario a un elemento primario). Para evitar este tipo de efecto burbujeante, muchos desarrolladores usan un método de evento llamado stopPropagation( ) . Alternativamente, los desarrolladores han comenzado a usar la declaración return false para detener dicha propagación. Ahora, hay otra terminología llamada preventDefault( ) . Como su nombre lo indica, este método evita que se active cualquier comportamiento predeterminado de un elemento. El mejor caso de uso es evitar que una etiqueta de anclaje abra un enlace.

Puede encontrar un escenario en el que le gustaría evitar que la etiqueta de anclaje abra un enlace (comportamiento predeterminado), así como evitar que el evento llegue al padre. En tal situación, en lugar de escribir dos líneas de código, puede hacerlo en una sola línea, es decir; return false

Answer 1

falso retorno;

return false; hace 3 cosas separadas cuando lo llamas:

1. event.preventDefault() : detiene el comportamiento predeterminado del navegador.
2. event.stopPropagation() : evita que el evento propague (o "burbujee") el DOM.
3. Detiene la ejecución de devolución de llamada y vuelve inmediatamente cuando se llama.

Tenga en cuenta que este comportamiento difiere de los controladores de eventos normales (que no son jQuery), en los que, en particular, return false no detiene el evento.

preventDefault ();

preventDefault(); hace una cosa: detiene el comportamiento predeterminado de los navegadores.

¿Cuándo usarlos?

Sabemos lo que hacen, pero ¿cuándo usarlos? Simplemente depende de lo que quieras lograr. Utilice preventDefault(); si desea "simplemente" evitar el comportamiento predeterminado del navegador. Use return false; cuando desee evitar el comportamiento predeterminado del navegador y evitar que el evento propague el DOM. En la mayoría de las situaciones en las que usaría return false; lo que realmente quieres es preventDefault() .

Ejemplos:

Tratemos de entender con ejemplos:

Veremos puro ejemplo de JAVASCRIPT

Ejemplo 1:

<div onclick=''executeParent()''>
  <a href=''http://stackoverflow.com'' onclick=''executeChild()''>Click here to visit stackoverflow.com</a>
</div>
<script>
  function executeChild() {
    alert(''Link Clicked'');
  }

  function executeParent() {
    alert(''div Clicked'');
  }
</script>

Ejecute el código anterior, verá el hipervínculo ''Haga clic aquí para visitar stackoverflow.com'' ahora, si hace clic en ese enlace primero, recibirá la alerta de JavaScript. Haga clic en el enlace A continuación, recibirá la div. De alerta de JavaScript . Haga clic e inmediatamente será redirigido a stackoverflow.com.

Ejemplo 2

<div onclick=''executeParent()''>
  <a href=''http://stackoverflow.com'' onclick=''executeChild()''>Click here to visit stackoverflow.com</a>
</div>
<script>
  function executeChild() {
    event.preventDefault();
    event.currentTarget.innerHTML = ''Click event prevented''
    alert(''Link Clicked'');
  }

  function executeParent() {
    alert(''div Clicked'');
  }
</script>

Ejecute el código anterior, verá el hipervínculo ''Haga clic aquí para visitar stackoverflow.com'' ahora si hace clic en ese enlace primero, recibirá la alerta de javascript. Haga clic en el enlace Siguiente. Recibirá el div. De alerta de javascript. Haga clic en Siguiente, verá el hipervínculo ''. Haga clic aquí para visitar stackoverflow.com ''reemplazado por el texto'' Haga clic en evento evitado ''y no será redirigido a stackoverflow.com. Esto se debe al método event.preventDefault () que utilizamos para evitar que se active la acción de clic predeterminada.

Ejemplo 3

<div onclick=''executeParent()''>
  <a href=''http://stackoverflow.com'' onclick=''executeChild()''>Click here to visit stackoverflow.com</a>
</div>
<script>
  function executeChild() {
    event.stopPropagation();
    event.currentTarget.innerHTML = ''Click event is going to be executed''
    alert(''Link Clicked'');
  }

  function executeParent() {
    alert(''div Clicked'');
  }
</script>

Esta vez, si hace clic en Enlace, no se llamará a la función executeParent () y esta vez no obtendrá el div de alerta de JavaScript. Esto se debe a que hemos evitado la propagación al div principal mediante el método event.stopPropagation (). A continuación, verá el hipervínculo ''Haga clic aquí para visitar stackoverflow.com'' reemplazado por el texto ''El evento Click se ejecutará'' e inmediatamente será redirigido a stackoverflow.com. Esto se debe a que no hemos evitado que la acción de clic predeterminada se active esta vez utilizando el método event.preventDefault ().

Ejemplo 4

<div onclick=''executeParent()''>
  <a href=''http://stackoverflow.com'' onclick=''executeChild()''>Click here to visit stackoverflow.com</a>
</div>
<script>
  function executeChild() {
    event.preventDefault();
    event.stopPropagation();
    event.currentTarget.innerHTML = ''Click event prevented''
    alert(''Link Clicked'');
  }

  function executeParent() {
    alert(''Div Clicked'');
  }
</script>

Si hace clic en el enlace, no se llamará a la función executeParent () y no recibirá la alerta de JavaScript. Esto se debe a que hemos evitado la propagación al div principal mediante el método event.stopPropagation (). A continuación, verá el hipervínculo ''Haga clic aquí para visitar stackoverflow.com'' reemplazado por el texto ''Haga clic en evento evitado'' y no será redirigido a stackoverflow.com. Esto se debe a que hemos evitado que la acción de clic predeterminada se active esta vez utilizando el método event.preventDefault ().

Ejemplo 5:

Para return false, tengo tres ejemplos y todos parecen estar haciendo exactamente lo mismo (solo devolviendo false), pero en realidad los resultados son bastante diferentes. Esto es lo que realmente sucede en cada uno de los anteriores.

casos:

1. Devolver false desde un controlador de eventos en línea evita que el navegador navegue a la dirección del enlace, pero no impide que el evento se propague a través del DOM.
2. Devolver false desde un controlador de eventos jQuery evita que el navegador navegue a la dirección del enlace y evita que el evento se propague a través del DOM.
3. Devolver falso de un controlador de eventos DOM normal no hace absolutamente nada.

Veremos los tres ejemplos.

1. Retorno en línea falso.

<div onclick=''executeParent()''>
  <a href=''http://stackoverflow.com'' onclick=''return false''>Click here to visit stackoverflow.com</a>
</div>
<script>
  var link = document.querySelector(''a'');

  link.addEventListener(''click'', function() {
    event.currentTarget.innerHTML = ''Click event prevented using inline html''
    alert(''Link Clicked'');
  });


  function executeParent() {
    alert(''Div Clicked'');
  }
</script>

2. Devolver falso de un controlador de eventos jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <a href=''http://stackoverflow.com''>Click here to visit stackoverflow.com</a>
</div>
<script>
  $(''a'').click(function(event) {
    alert(''Link Clicked'');
    $(''a'').text(''Click event prevented using return FALSE'');
    $(''a'').contents().unwrap();
    return false;
  });
  $(''div'').click(function(event) {
    alert(''Div clicked'');
  });
</script>

3. Devolver falso de un controlador de eventos DOM normal.

<div onclick=''executeParent()''>
  <a href=''http://stackoverflow.com'' onclick=''executeChild()''>Click here to visit stackoverflow.com</a>
</div>
<script>
  function executeChild() {
    event.currentTarget.innerHTML = ''Click event prevented''
    alert(''Link Clicked'');
    return false
  }

  function executeParent() {
    alert(''Div Clicked'');
  }
</script>

Espero que estos ejemplos sean claros. Intente ejecutar todos estos ejemplos en un archivo html para ver cómo funcionan.