javascript - tipos - ¿Cómo mostrar un cuadro de diálogo de confirmación al hacer clic en un enlace<a>?
tipos de mensajes en javascript (8)
Quiero que este enlace tenga un cuadro de diálogo de JavaScript que pregunta al usuario " ¿Está seguro? S / N ”.
<a href="delete.php?id=22">Link</a>
Si el usuario hace clic en "Sí", el enlace debería cargarse, si "No" no ocurrirá nada.
Sé cómo hacerlo en formularios, usando onclick ejecutando una función que devuelve true o false . Pero, ¿cómo hago esto con un enlace <a> ?
Controlador de eventos en línea
De la forma más sencilla, puede utilizar la función confirm() en un controlador de onclick 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 solo funcionará en los navegadores modernos (para los IE más antiguos, puede usar attachEvent() , returnValue y proporcionar una implementación para getElementsByClassName() o usar una biblioteca como jQuery que le ayudará con los problemas de los navegadores cruzados). Puede leer más sobre este método avanzado de manejo de eventos en MDN .
jQuery
Me gustaría permanecer lejos de ser considerado un fanático de jQuery, pero la manipulación de DOM y el manejo de eventos son dos áreas en las que más ayuda con las diferencias de navegador. Solo por diversión, aquí está cómo 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>
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>
Este método es ligeramente diferente a 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, 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.
Sugiero evitar el 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;
}
};
}
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?");
};
}
Una actualización algo tardía, para usar addEventListener() (según lo sugerido 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);
}
Lo anterior vincula una función al evento de cada enlace individual; lo que es potencialmente bastante inútil, cuando podría vincular el manejo de eventos (mediante la 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);
Debido a que el manejo de eventos se adjunta al elemento del body , que normalmente contiene una gran cantidad de otros elementos en los que se puede hacer clic, he utilizado una función provisional ( actionToFunction ) para determinar qué hacer con ese clic. Si el elemento pulsado es un enlace y, por lo tanto, tiene un nombre de tagName de a , el manejo de clics se pasa a la función reallySure() .
Referencias:
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>
USO DE PHP, HTML Y JAVASCRIPT para indicaciones
Solo si alguien busca usar php, html y javascript en un solo archivo, la respuesta a continuación está funcionando para mí ... adjunté el ícono de "basura" usado 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 1er código, luego ejecuto solo lo que necesito ... espero poder ayudar a alguien en mi caso.
<a href="delete.php?id=22" onclick = "if (! confirm(''Continue?'')) { return false; }">Confirm OK, then goto URL (uses onclick())</a>