Dado el elemento <a> y la tarea es mostrar el mensaje de confirmación al hacer clic en el enlace <a>, con la ayuda de JavaScript y jQuery.
Mostrar diálogo de confirmación al hacer clic en un enlace <a> usando JavaScript
- Evento onclick: este evento ocurre cuando el usuario hace clic en un elemento.
Sintaxis:
- En HTML:
<element onclick="myScript">
- En JavaScript:
object.addEventListener("click", myScript); - En JavaScript, usando el método addEventListener():
object.onclick = function() {myScript};
- En HTML:
- Método addEventListener(): este método agrega un controlador de eventos al documento.
Sintaxis:
document.addEventListener(event, function, useCapture)
Parámetros:
- evento: Este parámetro es obligatorio. Especifica la string, el nombre del evento.
- función: Este parámetro es obligatorio. Especifica la función que se ejecutará cuando ocurra el evento. Cuando ocurre el evento, se pasa un objeto de evento como primer parámetro a la función. El tipo depende del evento especificado. Por ejemplo, el evento «clic» pertenece al objeto MouseEvent.
- useCapture: este parámetro es opcional. Especifica un valor booleano que significa si el evento debe ejecutarse en la fase de captura o burbujeo.
- verdadero: el controlador de eventos se ejecuta en la fase de captura.
- falso: el controlador de eventos se ejecuta en la fase de burbujeo.
Ejemplo 1: este ejemplo agrega un método confirm() al enlace con el evento onclick . Esto verificará si desea continuar o no.
<!DOCTYPE HTML>
<html>
<head>
<title>
Display a confirmation dialog when
clicking an a tag link
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<a href="#" onclick="return confirm('Are you sure?')">
Link
</a>
<br><br>
<p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
el_up.innerHTML =
"Click on the LINK for further confirmation.";
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2: este ejemplo agrega una confirmación de clase a todos los enlaces. Después de esto, agrega el EventListener a los elementos de esa clase, en el evento onclick . Luego llama a un método para manejar por separado el diálogo de confirmación .
<!DOCTYPE HTML>
<html>
<head>
<title>
Display a confirmation dialog when
clicking an a tag link
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<a href="#" class="confirm">Link</a>
<br><br>
<p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
el_up.innerHTML =
"Click on the LINK for further confirmation.";
var el = document.getElementsByClassName('confirm');
var confirmThis = function (e) {
if (!confirm('Are you sure?')) e.preventDefault();
};
for (var i = 0, l = el.length; i < l; i++) {
el[i].addEventListener('click', confirmThis, false);
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Mostrar diálogo de confirmación al hacer clic en un enlace <a> usando jQuery
- Método jQuery on(): este método agrega uno o más controladores de eventos para los elementos seleccionados y los elementos secundarios.
Sintaxis:
$(selector).on(event, childSelector, data, function, map)
Parámetros:
- evento: Este parámetro es obligatorio. Especifica uno o más eventos o espacios de nombres para adjuntar a los elementos seleccionados. En el caso de múltiples valores de eventos, estos están separados por espacios. El evento debe ser válido.
- childSelector: este parámetro es opcional. Especifica que el controlador de eventos solo debe adjuntarse a los elementos secundarios definidos.
- datos: Este parámetro es opcional. Especifica datos adicionales para pasar a la función.
- función: Este parámetro es obligatorio. Especifica la función que se ejecutará cuando ocurra el evento.
- map: especifica un mapa de eventos ({event:func(), event:func(), …}) que tiene uno o más eventos para agregar a los elementos seleccionados y funciones para ejecutar cuando ocurren los eventos.
Ejemplo 1: este ejemplo agrega una confirmación de clase al enlace de todos. Después de esto, agrega el EventListener a los elementos de esa clase, en el evento onclick . Luego llama al diálogo de confirmación .
<!DOCTYPE HTML>
<html>
<head>
<title>
Display a confirmation dialog when
clicking an a tag link
</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<a href="#" class="confirm">Link</a>
<br><br>
<p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
$("#GFG_UP").
text("Click on the LINK for further confirmation.");
$('.confirm').on('click', function () {
return confirm('Are you sure?');
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2: este ejemplo agrega un método confirm() al enlace con el evento onclick . Esto verificará si desea continuar o no.
<!DOCTYPE HTML>
<html>
<head>
<title>
Display a confirmation dialog when
clicking an a tag link
</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<a href="#" onclick="return confirm('Are you sure?')">
Link
</a>
<br><br>
<p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
$("#GFG_UP").
text("Click on the LINK for further confirmation.");
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA