Evento dblclick en jQuery

El evento dblclick se dispara cuando se presiona dos veces seguidas el botón izquierdo del mouse.

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>

Ver ejemplo anterior

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>
Ver ejemplo anterior

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.