What is the difference between use preventDefault()and return false;?

Some differences:

• Functionality : preventDefault, as its name suggests, prevents the default action associated with that event; while it return falsereturns the value false (something that could sometimes prevent the default action, but that is not its main objective).
• Scope : preventDefaultit's an event method, that is, it's a function inside an object and it doesn't work without its event (you can't just do preventDefault()it, it has to be evento.preventDefault()); While it returnis a statement that returns a value and can be called at any time.
• Positioning - Inside an event handler preventDefaultcan be called preventDefaultat any time, whereas return falseit can only be done at the end. This may seem trivial, but it can have different results if there is some JS error in the middle of the event handler.

Although they may work similarly in some cases, this is not always the case . For example: in pure JavaScript, if you have a link with aand do preventDefault(), the page will not redirect because the default action is prevented. While if you do return falseyes, the redirection is performed.

document.querySelector("#enlace1").addEventListener("click", function(e) {
  e.preventDefault();
});

document.querySelector("#enlace2").addEventListener("click", function(e) {
  return false;
});

<a href="http://es.stackoverflow.com" id="enlace1">Yo no redirecciono</a>...
<a href="http://es.stackoverflow.com" id="enlace2">pero yo sí</a>

But this is not always the case: if you use return falseinline onclickinstead of using , then the default event will be avoided (for example with forms or links) .addEventListener

That's with pure JavaScript, inside jQuery oddly enough they work a bit differently. In jQuery, return falseit's equivalent to doing preventDefaultandstopPropagation . In other words, not only would the default action be avoided, but the propagation of the event to the ancestors of the element would also be avoided.

An example of this:

$("div").on("click", function() {
  console.log("Evento click del div");
});

$("#enlace1").on("click", function(e) {
  e.preventDefault();
  console.log("Evento click del enlace");
});

$("#enlace2").on("click", function(e) {
  console.log("Evento click del enlace");
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<div>
  <a href="http://www.google.com" id="enlace1">Pulsándome a mí, también se ejecutará la acción del div padre</a>
  <br/>
  <a href="http://www.google.com" id="enlace2">...pero conmigo no</a>
</div>

On StackOverflow in English, there is a question that goes into this topic with jQuery in more depth.

When to use one or the other?

Like everything: it will depend on the context and what you want to do. Especially if you're working with jQuery, where return falseit does a lot more than just prevent the default action.

Is it preferable to lean towards one of the two mentioned?

As I put above, it will depend on the context and if you are using pure JavaScript or some library like jQuery. I personally like to use preventDefault, but it's my own choice.

You should also think about other factors like what I put in the difference in positioning: if an error occurs in the event handler, return falseit will never run. I know that it is not really something so serious (you have an error, that is more serious than not reaching the return), but a detail to take into account.

What is it for stopImmediatePropagationand what advantages would I have when using it?

When multiple event handlers are attached to an element, they are executed in the order in which they were attached. stopImmediatePropagationcauses subsequent handler calls to stop.

It is important to note that it not only prevents the rest of the event handlers associated with that element from executing, but it also calls stopPropagation, pot which prevents the event handlers of the ancestors from being called.

What difference is there when using stopPropagationagainst stopImmediatePropagationor using them together?

stopPropagationstops propagation of events to the element's ancestors (stops the "bubble" effect). For example, in the script above, when done return falsein jQuery (and thus executed stopPropagation), only the del event handler was executed, abut not the del event handler div.

But if the element has more event handlers, stopPropagationit won't stop them, it will just stop propagation to the ancestors. With stopImmediatePropagation, it does stop propagation to controllers associated with that element.

Also, as I also said in the previous point, stopImmediatePropagationcall stopPropagation. That is why it makes no sense to use them together: If you are going to use both, just use stopImmediatePropagation.

Let's give an example to illustrate it: I have an element and I assign 3 click event handlers to it (A, B and C), where B has a stopImmediatePropagation. Controllers are executed in the order they were attached, so when you click, A will be executed, then B... and C will never be executed.

$("a").on("click", function(e) { 
  console.log("EVENTO A");
});

$("a").on("click", function(e) { 
  console.log("EVENTO B");
  e.stopImmediatePropagation();
});


$("a").on("click", function(e) { 
  console.log("EVENTO C (nunca se ejecutará)");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<a href="#">Pulsa sobre este enlace</a>

That example is a bit simple so you don't see the usefulness of stopImmediatePropagation, but imagine that you have a form in which you are going to do validation, if something fails you can do stopImmediatePropagationso that if there is any other event associated with the form, it will not be run.

answering the questions,

1.- Just preventDefault()as it indicates its name, it cancels the default action or response. For example, pressing a link prevents it from going to the path specified in the href, or prevents submitting a form when clicking the submit button, etc. return falsestops code execution and exits the function block.

2.- If you have a function where your parameter is an array, and there are several actions on that parameter, but if it comes empty or undefined, you probably want to stop the process by returning false. In the event that you want to submit a form, for example by ajax, it is recommended that when submitting, stop the propagation of the submit action of that form with preventDefault(), but continue with the following line of code, which will take care of to submit the form by ajax.

3.- You should lean towards what you really need, but in general, to cancel input actions or DOM elements with jQuery, it is not recommended to usereturn false

Calling stopPropagationwithin a handler declared on an element prevents the event from escalating up the DOM hierarchies, but it does not prevent handlers declared on that element from executing.

The behavior of stopImmediatePropagation , on the other hand, not only implies (implicitly) stopPropagationbut also, given the existence of several handlers, and that they are executed in sequence, the call to stopImmediatePropagationin one of the handlers interrupts the sequence, leaving the remaining handlers unexecuted .

The order of the sequence in which the handlers are executed is a queue that respects the order in which they were declared.