16 - Evento dblclick.

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

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="estilos.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="funciones.js"></script>
</body>

</html>

funciones.js

let x = $(document);
x.ready(inicializarEventos);

function inicializarEventos() {
  let x = $("#recuadro");
  x.dblclick(dobleClic);
}

function dobleClic() {
  let x = $(this);
  x.hide()
}

estilos.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.


Retornar