Home / Questions / 274553
Accepted
Pablo Lozano
Asked: 2020-06-26 06:51:54 +0800 CST 2020-06-26 06:51:54 +0800 CST

What is the difference between these ways to cancel events in JQuery?

  • 772

If I have a form and I assign a function to the submit event like so:

$('#miForm').on('submit',hazAlgo);

function hazAlgo(evento) {
  console.log('Me han pulsado');
  // ... 
  return false; //evito el submit
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="miForm" action="#">

  <button>Púlsame</button>
</form>

I have seen that there are several ways to prevent the submit from happening:

  1. Let the doSomething function return false.
  2. Let the doSomething function call evento.preventDefault().
  3. Let the doSomething function call evento.stopImmediatePropagation().

What are the differences between these three? o When should each be called?

javascript

1 Answers

  1. Best Answer

    It depends on what you want to do, although the fact that the function hazAlgo()returns falseis practically the same as calling event.preventDefault()y event.stopPropagation()(which you don't mention), it's not the same as calling event.stopImmediatePropagation().

    Now I'm going to talk about the details:

    • That the function hazAlgo()returnsfalse : will have the following consequences. It will stop the capillarity (or bubbling) of the event, preventing those eventListenerof the elements that contain the person who triggers the event from being triggered. It will stop the default action of the event (in a form, for example, that it is submitted) and will NOT stop the execution of the others eventListenerthat exist for that element.

    const preventMe = () => false;
const printMeA = () => {
  // Se ejecutará porque devolver false no previene los eventListeners del mismo elemento
  console.log('Me han pulsado, soy el enlace')
};
const printMeDiv = () => {
  // No se ejecutará porque devolver false previene la capilaridad
  console.log('Me han pulsado, soy el div')
}

$('a').on('click', preventMe);
$('a').on('click', printMeA);

$('div').on('click', printMeDiv);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<a href="https://es.stackoverflow.com">Púlsame</a>
</div>

    • That the function hazAlgo()callsevent.preventDefault() : will have the following consequences. It will NOT stop the capillarity of the event, so those eventListenerof the elements that contain it will be executed . It will stop the default event action and will NOT stop the execution of the others eventListenerfor this element.

    const preventMe = (e) => {e.preventDefault()};
const printMeA = () => {
  // Se ejecutará porque llamar a e.preventDefault() no previene los eventListeners del mismo elemento
  console.log('Me han pulsado, soy el enlace')
};
const printMeDiv = () => {
  // Se ejecutará porque llamar a e.preventDefault() no previene la capilaridad
  console.log('Me han pulsado, soy el div')
}

$('a').on('click', preventMe);
$('a').on('click', printMeA);

$('div').on('click', printMeDiv);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a href="https://es.stackoverflow.com">Púlsame</a>
</div>

    • That the function hazAlgo()callsevent.stopImmediatePropagation() : will have the following consequences. It will stop the capillarity of the event, preventing the capillarity of eventListenersthe elements that contain the one who triggers the event from firing. It will NOT stop the default action of the event (ie if it is a hook, it will continue with the action of the hook) and will stop the execution of the others eventListener.

    const preventMe = (e) => {e.stopImmediatePropagation();};
const printMeA = () => {
  // NO se ejecutará porque e.stopImmediatePropagation previene los eventListeners del mismo elemento
  console.log('Me han pulsado, soy el enlace')
};
const printMeDiv = () => {
  // No se ejecutará porque e.stopImmediatePropagation previene la capilaridad
  console.log('Me han pulsado, soy el div')
}

$('a').on('click', preventMe);
$('a').on('click', printMeA);

$('div').on('click', printMeDiv);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a href="https://es.stackoverflow.com">Púlsame</a>
</div>

    • That the function hazAlgo()callsevent.stopPropagation() : You don't mention it, but I put it as an extra ball. The following will happen. It will stop the action capilaridadof the event, it will NOT prevent the default action of the event and it will NOT prevent the others eventListenersof the element.

    const preventMe = (e) => {e.stopPropagation();};
const printMeA = () => {
  // Se ejecutará porque e.stopPropagation NO previene los eventListeners del mismo elemento. Lo pongo en alert en lugar de console.log para que se aprecie
  alert('Me han pulsado, soy el enlace')
};
const printMeDiv = () => {
  // No se ejecutará porque e.stopPropagation previene la capilaridad
  console.log('Me han pulsado, soy el div')
}

$('a').on('click', preventMe);
$('a').on('click', printMeA);

$('div').on('click', printMeDiv);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a href="https://es.stackoverflow.com">Púlsame</a>
</div>

    Having said all this, it could be summarized in the following table:

    | Acción                       | DetieneCapilaridad | Detiene Acción por Defecto | Detiene acciones sobre el mismo elemento |
|------------------------------|:------------------:|:--------------------------:|:----------------------------------------:|
|       devolver `false`       |         Sí         |             Sí             |                    No                    |
|      e.preventDefault()      |         No         |             Sí             |                    No                    |
|      e.stopPropagation()     |         Sí         |             No             |                    No                    |
| e.stopImmediatePropagation() |         Sí         |             No             |                    Sí                    |
    • 4