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

<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
</head>
<body>
<div id="recuadro">
<h1>Doble clic para ocultar este recuadro</h1>
</div>
</body>
</html>

funciones.js

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

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

function dobleClic()
{
  var x;
  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:

  var x;
  x=$("#recuadro");
  x.dblclick(dobleClic);

Cuando se presiona dos veces seguidas dentro del div se dispara la función:

function dobleClic()
{
  var x;
  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