¿Cómo mostrar un cuadro de diálogo de confirmación al hacer clic en un enlace <a>?

Quiero que este enlace tenga un diálogo de JavaScript que pregunte al usuario " ¿Estás seguro? S / N ".

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

Si el usuario hace clic en "Sí", el enlace debe cargarse, si "No" no pasará nada.

Sé cómo hacerlo en formularios, usando onclickejecutar una función que devuelve trueo false. Pero, ¿cómo hago esto con un <a>enlace?

Controlador de eventos en línea

De la manera más simple, puede usar la confirm()función en un onclickcontrolador en línea .

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

Manejo avanzado de eventos

Pero normalmente le gustaría separar su HTML y Javascript , por lo que le sugiero que no use controladores de eventos en línea, sino que coloque una clase en su enlace y agregue un detector de eventos.

<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 ejemplo sólo funcionará en los navegadores modernos (por IEs de edad avanzada se puede utilizar attachEvent(), returnValuey proporcionar una implementación para getElementsByClassName()o utilizar una biblioteca como jQuery que le ayudará con problemas de cross-browser). Puede leer más sobre este método avanzado de manejo de eventos en MDN .

jQuery

Me gustaría estar lejos de ser considerado un fanático de jQuery, pero la manipulación del DOM y el manejo de eventos son dos áreas donde ayuda más con las diferencias del navegador. Solo por diversión, así es como se vería con 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>

Sugeriría evitar JavaScript en línea:

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;
        }
    };
}​

Demostración de JS Fiddle .

Lo anterior actualizado para reducir el espacio, aunque manteniendo la claridad / función:

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?");
    };
}

Demostración de JS Fiddle .

Una actualización algo tardía, para usar addEventListener()(como se sugiere, por bažmegakapa , en los comentarios a continuación):

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);
}

Demostración de JS Fiddle .

Lo anterior vincula una función al evento de cada enlace individual; lo cual es potencialmente un desperdicio, cuando podría vincular el manejo de eventos (mediante delegación) a un elemento ancestro, como el siguiente:

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);

Demostración de JS Fiddle .

Debido a que el manejo de eventos está asociado al bodyelemento, que normalmente contiene una gran cantidad de otros elementos en los que se puede hacer clic, he usado una función provisional ( actionToFunction) para determinar qué hacer con ese clic. Si el elemento cliqueado es un enlace y, por lo tanto, tiene un tagNamede a, el manejo de clics se pasa a la reallySure()función.

Referencias

• addEventListener().
• Operador condicional ('ternario') .
• confirm().
• getElementsByTagName().
• onclick.
• if () {}.

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

También puedes probar esto:

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

jAplus

Puedes hacerlo sin escribir 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 demostración

Este método es ligeramente diferente de cualquiera de las respuestas anteriores si adjunta su controlador de eventos usando addEventListener (o 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;
  }
}

Puede adjuntar este controlador con:

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

O para versiones anteriores de Internet Explorer:

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

Solo por diversión, voy a usar un solo evento en todo el documento en lugar de agregar un evento a todas las etiquetas de anclaje:

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?' );
    }
};

Este método sería más eficiente si tuviera muchas etiquetas de anclaje. Por supuesto, se vuelve aún más eficiente cuando agrega este evento al contenedor que tiene todas las etiquetas de anclaje.

La mayoría de los navegadores no muestran el mensaje personalizado pasado confirm().

Con este método, puede mostrar una ventana emergente con un mensaje personalizado si su usuario cambió el valor de cualquier <input>campo.

Puede aplicar esto solo a algunos enlaces , o incluso a otros elementos HTML en su página. Simplemente agregue una clase personalizada a todos los enlaces que necesitan confirmación y aplique el siguiente 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>

Intente cambiar el valor de entrada en el ejemplo para obtener una vista previa de cómo funciona.

USO DE PHP, HTML Y JAVASCRIPT para solicitar

Solo si alguien busca usar php, html y javascript en un solo archivo, la respuesta a continuación está funcionando para mí ... adjunto con el ícono de arranque "basura" para el enlace.

<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>

la razón por la que usé el código php en el medio es porque no puedo usarlo desde el principio ...

el siguiente código no funciona para mí: -

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>";

y lo modifiqué como en el primer código, luego ejecuto exactamente lo que necesito. Espero que pueda ayudar a alguien que no conozca mi caso.