29 - Evento ondblclick


El evento ondblclick 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.
pagina.html

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prueba</title>
    <link rel="stylesheet" href="estilos.css">
</head>

<body>
    <div id="recuadro" ondblclick="ocultar(this)">
        <h1>Doble clic para ocultar este recuadro</h1>
    </div>
    <script src="funciones.js"></script>
</body>

</html>

estilos.css

#recuadro {
    color: #aa0;
    background-color: #ff0;
    position: absolute;
    text-align: center;
    left: 40px;
    top: 30px;
    width: 800px;
    height: 70px;
}

funciones.js

function ocultar(objeto) {
    objeto.style.display = 'none'
}

Para ocultar el div accedemos a la propiedad display y le asignamos el valor none.


Retornar