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.





<html>
<head>

<script type="text/javascript">

  addEventListener('load',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>

</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>

</body>
</html>

Primero registramos mediante la llamada al método addEventListener el evento load de la página (recordemos que esta forma de registrar los eventos no funciona en el IE8 o anteriores, pero en muy poco tiempo la cantidad de dispositivos con dichos navegadores serán ínfimas), 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('load',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