15.01.2025

Como Criar um Diálogo de Confirmação ao Clicar em um Link

Resposta Rápida

Para exibir um pedido de confirmação ao clicar em um link, você pode usar JavaScript e adicionar um manipulador de eventos onclick diretamente no elemento:

document.querySelector('a.confirm').onclick = function() {
  return confirm('Você tem certeza de que deseja sair dessa página?');
};

A marcação HTML ficará assim:

<a href="https://meusite.com" class="confirm">Sair da Página</a>

Se você está procurando uma solução mais complexa e uma abordagem profissional, continue lendo.

Separando HTML e JavaScript para Clareza do Código

Separar a lógica de manipulação de eventos da marcação HTML é uma boa prática para melhorar a gerenciabilidade e a manutenção do código:

document.addEventListener('DOMContentLoaded', function() {
  var links = document.querySelectorAll('a.confirm');
  links.forEach(function(link) {
    link.addEventListener('click', confirmacaoNavegacao);
  });
});

function confirmacaoNavegacao(event) {
  if (!confirm('Você realmente deseja sair do conforto dessa página?')) {
    event.preventDefault(); // Dicas adicionais no console podem ajudar a entender o comportamento do script
  }
}

Neste exemplo, a estrutura da página é carregada junto com todos os elementos. Em seguida, um manipulador de eventos é adicionado a cada link. Se o visitante selecionar "Cancelar" na janela que aparece, event.preventDefault() cancela a navegação do link.

Manipuladores de Eventos Elegantes para Código Estruturado

Usar classes em JavaScript permite organizar manipuladores de eventos, o que contribui para a ordem e escalabilidade do código:

class LinkConfirmado {
  constructor(elemento) {
    this.elemento = elemento;
    this.init();
  }

  init() {
    this.elemento.addEventListener('click', this.confirmarNavegacao.bind(this));
  }

  confirmarNavegacao(event) {
    if (!confirm('Clique em OK para ir para a nova página.')) {
      event.preventDefault();
      event.stopPropagation(); // Impede a propagação dos manipuladores para evitar ações indesejadas.
    }
  }
}

document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('a.confirm').forEach(function(link) {
    new LinkConfirmado(link);
  });
});

A classe LinkConfirmado adiciona o manipulador de clique por conta própria e impede a propagação do evento, garantindo que outros manipuladores não sejam acionados acidentalmente.

Usando jQuery: Menos Verbose, Mais Funcional

jQuery simplifica o trabalho com o DOM ao fornecer o método on(), que é conveniente para gerenciar eventos em elementos dinâmicos:

$('body').on('click', 'a.confirm', function(event) {
  if (!confirm('Você realmente deseja sair dessa página?')) {
    event.preventDefault(); // O que acontece se decidirmos ficar na página atual um pouco mais?
  }
});

Nesta abordagem, a delegação de eventos é tratada no nível do body, permitindo rastrear cliques em todos os links com a classe .confirm, incluindo aqueles adicionados após o carregamento da página.

Visualização

• Transformando uma descrição de texto em uma imagem visual - => 🚪➡️ 🌲 (Nárnia) => 🚪🖱️🔒❓
  1. "Sim" => 🌲 (Nárnia)
  2. "Não" => 🏠 (Casa)

Ampliando a Compatibilidade: Considerando Diferentes Navegadores e Configurações de Diálogo

O método confirm() é suportado pela maioria dos navegadores, mas é sempre importante considerar as diferenças de compatibilidade e ter soluções alternativas ou polyfills disponíveis.

Para criar um diálogo de confirmação mais personalizado e estiloso, você pode usar bibliotecas como jQuery UI:

$("#dialogoConfirmacao").dialog({
  resizable: false,
  height: "auto",
  width: 400,
  modal: true,
  buttons: {
    "Confirmar": function() {
      $(this).dialog("close");
      window.location.href = linkUrl;
    },
    "Cancelar": function() {
      $(this).dialog("close");
    }
  }
});

Garantindo Acessibilidade: Atenção para Todos os Usuários

Não se esqueça da acessibilidade de seus diálogos de confirmação para todos os usuários, incluindo aqueles que usam leitores de tela e outras tecnologias assistivas. Use adequadamente roles e atributos ARIA:

<div id="dialogoConfirmacao" role="dialog" aria-labelledby="tituloDialogo" aria-describedby="descricaoDialogo"></div>
<h2 id="tituloDialogo">Confirmação de Ação</h2>
<p id="descricaoDialogo">Você tem certeza de que deseja sair da página?</p>

Conclusão: Melhorando a Experiência do Usuário e Desempenho

Considere melhorar a experiência do usuário: um excesso de diálogos de confirmação pode afetar negativamente o engajamento do usuário e levar à frustração. Use-os com moderação, fornecendo instruções claras para confirmação ou cancelamento de ações.

Para melhorar o desempenho, concentre-se em usar manipuladores de eventos globais, limitando o escopo da delegação e utilizando manipuladores de eventos passivos sempre que possível.

Recursos Úteis

1. <a>: Elemento de Análise - HTML: Linguagem de Marcação de Hipertexto | MDN — Detalhes sobre o uso do elemento <a> em HTML.
2. Window.confirm() - Web API | MDN — Abordagens para utilizar o método confirm() na criação de diálogos personalizados.
3. Criando um diálogo de confirmação de ação — Instruções para projetar sua própria janela modal para confirmações de ações do usuário.
4. Exibindo um diálogo ao clicar em um elemento <a> - Stack Overflow - Uma discussão focada na criação de diálogos de confirmação ao clicar em um link.

Video

Navigation