 |
Evento dblclick en jQuery
Evento dblclick ()
El evento dblclick ocurre cuando se hace doble clic en un elemento.
El método dblclick () desencadena el evento dblclick o adjunta una función para que se ejecute cuando se produce un evento dblclick.
Sugerencia: El evento dblclick también genera un evento de clic. Esto puede causar problemas si ambos eventos se aplican al mismo elemento.
Sintaxis
Active el evento dblclick para los elementos seleccionados:
$(selector).dblclick()
Adjunte una función al evento dblclick:
$(selector).dblclick(function)
Ejemplo
Haga doble clic en un elemento <p> para alertar un texto:
<!DOCTYPE html> <html><head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").dblclick(function(){ alert("Se hizo doble click en el texto."); }); }); </script> </head> <body> <p>Haga doble clic en este texto.</p> </body> </html>
Para ver el funcionamiento de este evento crearemos un div en una coordenada absoluta y lo ocultaremos al hacer doble clic en su interior.
pagina1.html
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de jQuery</title>
<meta charset="UTF-8">
<link rel="StyleSheet" href="estilos16.css" type="text/css">
</head>
<body>
<div id="recuadro">
<h1>Doble clic para ocultar este recuadro</h1>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="func16.js"></script>
</body>
</html>
func16.js
let x = $(document);
x.ready(inicializarEventos);
function inicializarEventos() {
let x = $("#recuadro");
x.dblclick(dobleClic);
}
function dobleClic() {
let x = $(this);
x.hide()
}
estilos16.css
#recuadro {
color:#aa0;
background-color:#ff0;
position:absolute;
text-align:center;
left:40px;
top:30px;
width:800px;
height:70px;
}
En la función inicializarEventos registramos el evento dblclick para el div:
let x = $("#recuadro");
x.dblclick(dobleClic);
Cuando se presiona dos veces seguidas dentro del div se dispara la función:
function dobleClic() {
let x = $(this);
x.hide()
}
donde obtenemos la referencia del elemento que emitió el evento y llamamos al método hide para que lo oculte.