Listado completo de tutoriales

Eventos: click y dblclick


Dos eventos que podemos capturar de cualquier elemento HTML son cuando un usuario hace un clic o un doble clic sobre el mismo.
El evento click se produce cuando el usuario hace un solo clic sobre el elemento HTML y suelta inmediatamente el botón del mouse en el mismo lugar y el dblclick cuando presiona en forma sucesiva en la misma ubicación.

Para probar como registramos estos eventos implementaremos una página que muestre dos div y definiremos el evento click para el primero y el evento dblclick para el segundo.

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

  <div style="width:200px;height:200px;background:#ffff00" id="recuadro1">
    Prueba del evento click
  </div>
  <div style="width:200px;height:200px;background:#ff5500" id="recuadro2">
    Prueba del evento dblclick
  </div>  

<script>
  addEventListener('DOMContentLoaded',inicio,false);

  function inicio()
  {
    document.getElementById('recuadro1').addEventListener('click',presion1,false);
    document.getElementById('recuadro2').addEventListener('dblclick',presion2,false);
  }

  function presion1()
  {
    alert('se hizo click');
  }

  function presion2()
  {
    alert('se hizo doble click');
  }
</script>
  
</body>
</html>

Primero registramos mediante la llamada al método addEventListener el evento DOMContentLoaded, y dentro de la función inicio registramos los eventos click y dblclick para los dos div que definimos en la página HTML:

  addEventListener('DOMContentLoaded',inicio,false);

  function inicio()
  {
    document.getElementById('recuadro1').addEventListener('click',presion1,false);
    document.getElementById('recuadro2').addEventListener('dblclick',presion2,false);
  }

Como vemos lo único que hacemos en los métodos que se disparan es mostrar un mensaje:

  function presion1()
  {
    alert('se hizo click');
  }

  function presion2()
  {
    alert('se hizo doble click');
  }

Retornar