¿Cómo mostrar un cuadro de diálogo de confirmación al hacer clic en un enlace <a>?
Quiero que este enlace tenga un cuadro de diálogo de JavaScript que le 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 debería cargarse; si hace clic en "No", no sucederá nada.
Sé cómo hacerlo en formularios, ejecutando onclickuna función que devuelve trueo false. ¿Pero cómo hago esto con un <a>enlace?
Manejador de eventos en línea
De la forma más sencilla, puedes utilizar 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 HTML y Javascript , por lo que le sugiero que no utilice controladores de eventos en línea, sino que coloque una clase en su enlace y le 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 solo funcionará en navegadores modernos (para IE más antiguos attachEvent(), puede usar returnValuey proporcionar una implementación getElementsByClassName()o usar una biblioteca como jQuery que ayudará con los problemas entre navegadores). Puedes leer más sobre este método avanzado de manejo de eventos en MDN .
jQuery
Me gustaría mantenerme alejado de ser considerado un fanático de jQuery, pero la manipulación DOM y el manejo de eventos son dos áreas en las que ayuda más con las diferencias del navegador. Sólo por diversión, así es como se vería esto 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>
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>
