Como exibir uma caixa de diálogo de confirmação ao clicar em um link <a>?

Desejo que este link tenha uma caixa de diálogo JavaScript que pergunte ao usuário “ Tem certeza? S / N ".

<a href="delete.php?id=22">Link</a>

Se o usuário clicar em “Sim”, o link deverá carregar, se “Não” nada acontecerá.

Eu sei como fazer isso em formulários, usando a onclickexecução de uma função que retorna trueou false. Mas como faço isso com um <a>link?

Manipulador de eventos embutido

Da maneira mais simples, você pode usar a confirm()função em um onclickmanipulador embutido .

<a href="delete.php?id=22" onclick="return confirm('Are you sure?')">Link</a>

Manipulação avançada de eventos

Mas normalmente você gostaria de separar seu HTML e Javascript , então sugiro que você não use manipuladores de eventos em linha, mas coloque uma classe no seu link e adicione um ouvinte de evento.

<a href="delete.php?id=22" class="confirmation">Link</a>
...
<script type="text/javascript">
    var elems = document.getElementsByClassName('confirmation');
    var confirmIt = function (e) {
        if (!confirm('Are you sure?')) e.preventDefault();
    };
    for (var i = 0, l = elems.length; i < l; i++) {
        elems[i].addEventListener('click', confirmIt, false);
    }
</script>

Este exemplo só irá funcionar em navegadores modernos (para IEs mais velhos você pode usar attachEvent(), returnValuee fornecer uma implementação para getElementsByClassName()ou usar uma biblioteca como jQuery que vai ajudar com questões cross-browser). Você pode ler mais sobre esse método avançado de manipulação de eventos no MDN .

jQuery

Eu gostaria de ficar longe de ser considerado um fanboy do jQuery, mas a manipulação do DOM e a manipulação de eventos são duas áreas em que ele ajuda mais com as diferenças do navegador. Apenas por diversão, aqui está como isso ficaria com o jQuery :

<a href="delete.php?id=22" class="confirmation">Link</a>
...
<!-- Include jQuery - see http://jquery.com -->
<script type="text/javascript">
    $('.confirmation').on('click', function () {
        return confirm('Are you sure?');
    });
</script>

Sugiro evitar o JavaScript in-line:

var aElems = document.getElementsByTagName('a');

for (var i = 0, len = aElems.length; i < len; i++) {
    aElems[i].onclick = function() {
        var check = confirm("Are you sure you want to leave?");
        if (check == true) {
            return true;
        }
        else {
            return false;
        }
    };
}​

Demonstração JS Fiddle .

O acima foi atualizado para reduzir o espaço, embora mantendo a clareza / função:

var aElems = document.getElementsByTagName('a');

for (var i = 0, len = aElems.length; i < len; i++) {
    aElems[i].onclick = function() {
        return confirm("Are you sure you want to leave?");
    };
}

Demonstração JS Fiddle .

Uma atualização um pouco tardia, para usar addEventListener()(como sugerido por bažmegakapa , nos comentários abaixo):

function reallySure (event) {
    var message = 'Are you sure about that?';
    action = confirm(message) ? true : event.preventDefault();
}
var aElems = document.getElementsByTagName('a');

for (var i = 0, len = aElems.length; i < len; i++) {
    aElems[i].addEventListener('click', reallySure);
}

Demonstração JS Fiddle .

O acima vincula uma função ao evento de cada link individual; o que é potencialmente um desperdício, quando você pode vincular a manipulação de eventos (usando delegação) a um elemento ancestral, como o seguinte:

function reallySure (event) {
    var message = 'Are you sure about that?';
    action = confirm(message) ? true : event.preventDefault();
}

function actionToFunction (event) {
    switch (event.target.tagName.toLowerCase()) {
        case 'a' :
            reallySure(event);
            break;
        default:
            break;
    }
}

document.body.addEventListener('click', actionToFunction);

Demonstração JS Fiddle .

Como a manipulação de eventos é anexada ao bodyelemento, que normalmente contém uma série de outros elementos clicáveis, usei uma função provisória ( actionToFunction) para determinar o que fazer com esse clique. Se o elemento clicado é um link e, portanto, possui um tagNamedos a, a manipulação de cliques é passada para a reallySure()função.

Referências:

• addEventListener().
• Operador condicional ('ternário') .
• confirm().
• getElementsByTagName().
• onclick.
• if () {}.

<a href="delete.php?id=22" onclick = "if (! confirm('Continue?')) { return false; }">Confirm OK, then goto URL (uses onclick())</a>

Você também pode tentar isso:

<a href="" onclick="if (confirm('Delete selected item?')){return true;}else{event.stopPropagation(); event.preventDefault();};" title="Link Title">
    Link Text
</a>

jAplus

Você pode fazer isso sem escrever código JavaScript

<head>
   <script src="/path/to/jquery.js" type="text/javascript" charset="utf-8"></script>
   <script src="/path/to/jquery.Aplus.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
...
   <a href="delete.php?id=22" class="confirm" title="Are you sure?">Link</a>
...
</body>

Página de demonstração

Esse método é um pouco diferente das respostas acima se você anexar seu manipulador de eventos usando addEventListener (ou attachEvent).

function myClickHandler(evt) {
  var allowLink = confirm('Continue with link?');
  if (!allowLink) {
    evt.returnValue = false; //for older Internet Explorer
    if (evt.preventDefault) {
      evt.preventDefault();
    }
    return false;
  }
}

Você pode anexar esse manipulador com:

document.getElementById('mylinkid').addEventListener('click', myClickHandler, false);

Ou para versões mais antigas do Internet Explorer:

document.getElementById('mylinkid').attachEvent('onclick', myClickHandler);

Apenas por diversão, vou usar um único evento em todo o documento, em vez de adicionar um evento a todas as tags de âncora:

document.body.onclick = function( e ) {
    // Cross-browser handling
    var evt = e || window.event,
        target = evt.target || evt.srcElement;

    // If the element clicked is an anchor
    if ( target.nodeName === 'A' ) {

        // Add the confirm box
        return confirm( 'Are you sure?' );
    }
};

Esse método seria mais eficiente se você tivesse muitas tags de âncora. Obviamente, isso se torna ainda mais eficiente quando você adiciona esse evento ao contêiner com todas as tags de âncora.

A maioria dos navegadores não exibe a mensagem personalizada passada para confirm().

Com esse método, você pode mostrar um pop-up com uma mensagem personalizada se o usuário alterou o valor de qualquer <input>campo.

Você pode aplicar isso apenas a alguns links ou a outros elementos HTML da sua página. Basta adicionar uma classe personalizada a todos os links que precisam de confirmação e aplicar, use o seguinte código:

$(document).ready(function() {
  let unsaved = false;
  // detect changes in all input fields and set the 'unsaved' flag
  $(":input").change(() => unsaved = true);
  // trigger popup on click
  $('.dangerous-link').click(function() {
    if (unsaved && !window.confirm("Are you sure you want to nuke the world?")) {
      return; // user didn't confirm
    }
    // either there are no unsaved changes or the user confirmed
    window.location.href = $(this).data('destination');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<input type="text" placeholder="Nuclear code here" />
<a data-destination="https://en.wikipedia.org/wiki/Boom" class="dangerous-link">
    Launch nuke!
</a>

Tente alterar o valor de entrada no exemplo para obter uma visualização de como funciona.

USANDO PHP, HTML E JAVASCRIPT para solicitar

Apenas se alguém procurando usar php, html e javascript em um único arquivo, a resposta abaixo está funcionando para mim .. Anexei com o ícone de inicialização "lixo" usado para o link.

<a class="btn btn-danger" href="<?php echo "delete.php?&var=$var"; ?>" onclick="return confirm('Are you sure want to delete this?');"><span class="glyphicon glyphicon-trash"></span></a>

a razão pela qual eu usei o código php no meio é porque eu não posso usá-lo desde o início ..

o código abaixo não funciona para mim: -

echo "<a class='btn btn-danger' href='delete.php?&var=$var' onclick='return confirm('Are you sure want to delete this?');'><span class='glyphicon glyphicon-trash'></span></a>";

e eu o modifiquei como no primeiro código e, em seguida, corro exatamente como o que preciso. Espero que eu possa ajudar alguém que precise do meu caso.