Neste artigo você vai aprender a como exibir a mensagem Você tem certeza que quer sair da página? com JavaScript
Fala programador(a), beleza? Bora aprender mais sobre as mensagens de tela com JavaScript!
Se quisermos exibir uma mensagem ao usuário perguntando se ele tem certeza que quer sair da página após preencher os dados, podemos utilizar o evento beforeunload do objeto Window.
Ele é acionado quando o usuário tenta sair da página, seja por meio de um clique em um link, um redirecionamento ou até mesmo ao atualizar a página.
Para exibir a mensagem para o usuário, basta retornarmos a mensagem desejada como string na função de callback do evento. Por exemplo:
window.addEventListener("beforeunload", (event) => {
event.preventDefault();
event.returnValue = "Você tem certeza que quer sair dessa página?";
});
Nesse exemplo, utilizamos o método addEventListener para adicionar um listener para o evento beforeunload.
Em seguida, definimos uma função de callback que recebe um evento como parâmetro. Utilizamos o método preventDefault para cancelar o comportamento padrão do evento e o atribuímos a mensagem desejada à propriedade returnValue do evento.
Ao sair da página, o navegador exibirá a mensagem para o usuário e aguardará a confirmação ou cancelamento da ação.
Se o usuário confirmar, a página será fechada. Se o usuário cancelar, a página continuará aberta.
É importante lembrar que essa funcionalidade pode ser bloqueada pelos navegadores, então não podemos garantir que a mensagem será exibida em todos os casos.
Além disso, essa abordagem pode ser considerada um pouco invasiva pelos usuários, então é importante utilizá-la com moderação.
Outra forma de exibir a mensagem
Uma outra forma de exibir a mensagem “Você tem certeza que quer sair dessa página?” ao usuário é utilizando o método confirm do objeto Window.
Ele exibe uma caixa de diálogo com uma mensagem e dois botões “OK” e “Cancelar”.
O usuário pode escolher entre os dois botões e a função retorna true se o usuário escolher “OK” e false se escolher “Cancelar”.
Por exemplo:
const sairDaPagina = () => {
return window.confirm("Você tem certeza que quer sair dessa página?");
};
document.querySelector("a").addEventListener("click", (event) => {
if (!sairDaPagina()) {
event.preventDefault();
}
});
Nesse exemplo, criamos uma função chamada sairDaPagina que exibe a mensagem para o usuário e retorna o resultado da escolha.
Em seguida, adicionamos um listener para o evento click de todos os links da página.
Quando o usuário clicar em um link, chamamos a função sairDaPagina.
Se o usuário escolher “Cancelar”, utilizamos o método preventDefault para cancelar o comportamento padrão do evento e evitar que o usuário saia da página.
Essa é uma forma mais simples de exibir a mensagem para o usuário, mas ela também pode ser considerada invasiva pelos usuários.
Além disso, ela só funciona para links e não para outras ações que possam causar a saída da página, como atualização ou redirecionamento.
Deixe um comentário contando o que achou deste artigo 🙂
Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:
Conclusão
Neste artigo você viu como criar a funcionalidade de exibir a mensagem Você tem certeza que quer sair desta página?
Utilizamos JavaScript puro para isso, porém lembre-se que alguns navegadores podem não aceitar este código
Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.
Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!
Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!