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');
}
