Buenas tardes!
Estoy haciendo una aplicacion web y necesito detectar la funcion del mouse similar a como lo hace cualquier sistema operativo.
Explico mas claramente,
necesito que si se hace un solo click, lance una funcion, si se hacen dos clicks rapidamente, lance otra, y si se hacen dos clicks, pero lentamente, lance una tercera funcion.
Hice un pequeño script con ayuda de internet y lo probe en firefox, crome e ie.
En firefox y chrome funcionan correctamente, pero no asi en ie y no puedo encontrar
el problema, parece que al dar el segundo click, el explorador tarde en detectarlo.
Aqui el codigo de fuente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
.caja{
width:200px;
height:200px;
display:block;
background:#CCC;
}
</style>
<script type="text/javascript">
// ACA DETECTO SI ES IE U OTROS
if(navigator.userAgent.indexOf("MSIE")>=0){
navegador=0;
}
else {
navegador=1;
}
//ESTAS SON LAS FUNCIONES A LANZAR
function click_simple(id) {
document.getElementById(id).style.background="yell ow";
}
function click_doble_rapido(id) {
document.getElementById(id).style.background="red" ;
}
function click_doble_lento(id) {
document.getElementById(id).style.background="blue ";
}
//ACA ESTABLEZCO QUE NO HAY UN PRIMER CLICK INICIADO Y CUENTA ATRAS COMO NULL TAMBIEN QUE EXPLICO MAS ADELANTE.
var fecha_click_anterior=null, cuentaAtras=null;
//ACA ESTABLEZCO LOS VALORES DE LAS DIFERENCIAS DE TIEMPO ENTRE EL PRIMER CLICK, EL SEGUNDO PARA SABER SI ES LENTO O RAPIDO. (LO DE HACER LA DIFERENCIA DE INTERVALOS ENTRE IE Y OTROS LO AGREGUE ACTUALMENTE POR QUE ANTES NO DETECTABA NADA DIRECTAMENTE, AHORA DETECTA, PERO MUY MAL, FIJENSE QUE LOS VALORES DE IE SON MAS ALTOS, E IRREALES, NADIE TARDA DOS SEGUNDOS EN HACER DOS CLICKS.
if (navegador==1){
var intervalo1=300;
var intervalo2=750;
}
if (navegador==0){
var intervalo1=1000;
var intervalo2=1600;
}
//ACA LA FUNCION DE DETECTAR EN SI.
function detectarClick(id) {
//ESTABLESCO QUE TODAVIA NO ES NI CLICK RAPIDO NI LENTO
var esDobleRapido=false;
var esDobleLento=false;
//LA FECHA DEL CLICK ACTUAL
var fecha_click = new Date();
//EVALUA SI EXISTE UN CLICK ANTERIOR
if( fecha_click_anterior!=null ) {
//CALCULA LA DIFERENCIA ENTRE EL PRIMER Y EL SEGUNDO CLICK
var diferencia = fecha_click.getTime() - fecha_click_anterior.getTime();
//ESTO LO AGREGUE YO PARA PODER VISUALIZAR LOS EVENTOS EN PANTALLA DONDE NOTE QUE IE TARDABA EN LANZAR LA FUNCION
document.getElementById('i1').value=fecha_click.ge tTime();
document.getElementById('i2').value=fecha_click_an terior.getTime();
document.getElementById('i3').value=diferencia;
document.getElementById('i4').value=fecha_click;
//EVALUA SI LA DIFERENCIA ES MENOR AL VALOR ESTABLECIDO COMO INTERVALO1
if( diferencia < intervalo1 ) {
//SI ES ASI ESTABLECE NUEVAMENTE QUE NO HAY UN PRIMER CLICK
fecha_click_anterior=null;
//ESTABLECE QUE ESTE ES UN DOBLE CLICK RAPIDO
esDobleRapido=true;
//ELIMINA LA CUENTA QUE EVALUA SI SOLO ES UN CLICK
clearTimeout( cuentaAtras );
//EJECUTAMOS LA FUNCION DE CLICK DOBLE RAPIDO
click_doble_rapido(id);
return false;
}
//ACA SUCEDE TODO LO MISMO PERO EVALUANDO SI ES MENOR AL INTERVALO ESTABLECIDO COMO 2 PARA DETECTAR EL DOBLE CLICK LENTO
if( diferencia < intervalo2 ) {
fecha_click_anterior=null;
esDobleLento=true;
clearTimeout( cuentaAtras );
click_doble_lento(id);
return false;
}
}
//ACA EVALUO SI NO ES NINGUN TIPO DE DOBLE CLICK.
if(!esDobleRapido && !esDobleLento) {
//COMIENZO UNA CUENTA REGRESIVA, SI NO SE EJECUTA UN DOBLE CLICK ANTES DEL TIEMPO ESTABLECIDO COMO INTERVALO2 LANZA LA FUNCION DE CLICK SIMPLE.
cuentaAtras = setTimeout('click_simple('+id+')',intervalo2);
//ESTABLEZCO LA FECHA DEL CLICK ANTERIOR CON LA DEL CLICK ACTUAL POR SI HAY FUTUROS CLICKS
fecha_click_anterior = fecha_click;
}
}
</script> </head>
<body>
<div onClick="detectarClick(this.id)" id="1" class="caja"></div>
<div onmousedown="detectarClick(this.id)" id="2" class="caja"></div>
<input type="text" id="i1" />
<input type="text" id="i2" />
<input type="text" id="i3" />
<input type="text" id="i4" style="width:300px;"/>
</body>
</html>
Perdón que sea tan extenso, es la manera que mejor me funciono, con la diferencia de segundos, probe con variables pero no me funciono.
Es mi primer consulta, y siempre consigo mucha ayuda desde la consulta de otras personas, pero esto es mas personal y no logro solucionarlo.
Es muy importante para mi, si alguien me puede guiar un poco que puede pasar o si es un problema del explorador como lo puedo solucionar, necesito que ande en todos los exploradores, o en su mayoria, pero como siempre IE...
Aclaro que principalmente hice uno global sin distincion con IE y como los valores son bajos , e IE tarda en detectar no hacia nada directamente.
Pueden ver el codigo en funcionamiento en mi sitio.
http://www.estudiocristal.com.ar/click.html
Espero que puedan ayudarme ! Muchisimas Gracias!