El evento dblclick se dispara cuando se presiona dos veces seguidas el botón izquierdo del mouse dentro de la marca que está escuchando dicho 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">
</div>
<script src="funciones.js"></script>
</body>
</html>
estilos.css
#recuadro {
color: #aa0;
background-color: #ff0;
position: absolute;
left: 40px;
top: 30px;
width: 800px;
height: 70px;
}
funciones.js
document.getElementById('recuadro').addEventListener('dblclick', (e) => {
e.target.style.display = 'none'
})
Como podemos comprobar registramos para el evento 'dblclick' del recuadro una función flecha que recibe como parámetro la referencia del objeto que emitió el evento.