Qual a diferença de uso de return false, event.stopPropagation() e event.preventDefault()?

O return false é utilizado para interromper o fluxo normal de um evento em JavaScript. Ele consiste em uma combinação dos métodos event.preventDefault() e event.stopPropagation().

Quando você utiliza return false, você está cancelando o evento atual e garantindo que nenhum outro código relacionado a esse evento seja executado, como outros manipuladores de eventos associados ao mesmo elemento. Além disso, o return false também previne o comportamento padrão do evento, como a atualização da página em um clique de um link, por exemplo.

O event.stopPropagation() é utilizado para interromper a propagação de um evento para elementos pai ou irmãos. Isso significa que, se um elemento possui vários eventos anexados a ele, a propagação normal do evento será interrompida e apenas o manipulador de eventos associado a esse elemento será executado. Os eventos nos elementos pais ou irmãos não serão afetados.

O event.preventDefault() é utilizado para cancelar o comportamento padrão de um evento. Por exemplo, se você tem um formulário e deseja impedir que ele seja enviado quando o usuário pressionar a tecla Enter, você pode usar event.preventDefault() no evento keydown para cancelar essa ação padrão.

Aqui está um exemplo para ilustrar o uso desses métodos:

document.querySelector('button').addEventListener('click', function(event) {
  event.preventDefault(); // Impede o comportamento padrão do evento, evitando que a página seja recarregada

  // Faz algo específico

  event.stopPropagation(); // Interrompe a propagação do evento para outros manipuladores no mesmo elemento
  return false; // Combinação de event.preventDefault() e event.stopPropagation()
});

Em resumo, return false é um atalho para event.preventDefault() e event.stopPropagation(), cancelando o comportamento padrão do evento e a propagação do evento. Porém, é importante observar que o return false pode não funcionar corretamente em todos os contextos, especialmente quando não estamos lidando com eventos específicos, mas sim com ações assíncronas, como requisições AJAX. Nesses casos, é recomendado utilizar os métodos separadamente, de acordo com a necessidade.