Problemas con onclick y ondblclick

core_2duo · #1 (**permalink**) 02/06/2007, 11:29

Tengo un mapa de imagen, y cuando hago onclick quiero que me enlace a una pagina, y cuando haga ondblclick me enlace a otra pagina. El problema es que cuando le doy doble click primero me muestra la pagina referente a onclick durante un tiempo muy breve y luego rapidamente carga la correspondiente a ondblclick

Código PHP:

  <html> 
<head><script type="text/javascript" src="funciones.js"></script></head> 
<body> 
  
  <div style="width: 100%" align="center"> 
 
<map name="FPMap0"> 
    <area href="javascript:;" onclick="abrir('semilleros.htm');" ondblclick="abrir('comarcas.htm');" shape="rect" coords="568, 68, 644, 112"> 
   
    </map> 
 <img src="img/dfm.png" usemap="#FPMap0" width="818" height="1175" border="0"/> 
  </div> 
</body> 
</html>

derkenuke · #2 (**permalink**) 02/06/2007, 12:53

Nunca me había fijado en el problema que se plantea al utilizar estos dos eventos juntos... La verdad es que yo diría que es un fallo de implementación javascript.

Al hacer doble click en el elemento se ejecuta primero una vez el simple click (onclick), otra vez el simple click (onclick) y después el doble click (ondblclick), consecuencia de haber hecho dos clicks seguidos en un intervalo de tiempo corto. Yo creo que ahí está la clave.

Es decir, asignemos un intervalo de tiempo determinado entre un click y otro para llamarlo doble click, digamos... 200ms. En el evento click debemos esperar 200ms para ejecutarlo. Si se produce otro click antes de 200ms entonces estamos hablando de doble click, y no ejecutariamos onclick sino ondblclick.

Bueno, y todo esto cómo lo implementaria yo? Pues capturo la fecha del primer click, la del segundo click y miro la diferencia entre fechas. Si es <200ms, es doble; si es mayor significa que han sido dos clicks independientes.

Código PHP:

  <div onclick="onclick_handler()">hola</div>

<script>

function e(q,noBr) {
    document.body.appendChild( document.createTextNode(q) );
    if(!noBr) document.body.appendChild( document.createElement("BR") );
}


function click_simple() { e("CLICK SIMPLE"); }
function click_doble() { e("CLICK DOBLE"); }

var fecha_click_anterior=null, cuentaAtras=null;
var intervalo=200;
function onclick_handler() {
    var esDoble=false;                        // nos dirá si hemos ejecutado la accion de click doble o la de click simple
    var fecha_click = new Date();            // la fecha del click actual
    if( fecha_click_anterior!=null ) {            // existe un click anterior
        var diferencia = fecha_click.getTime() - fecha_click_anterior.getTime();
        if( diferencia < intervalo ) {                //CLICK DOBLE
            esDoble=true;
            clearTimeout( cuentaAtras );                //cancelamos la cuenta atrás para el evento de click simple
            click_doble();                                //ejecutamos el evento de click doble
        }
    }
    if(!esDoble)                            // si no se ha ejecutado el click simple, en intervalo milisegundos saltará el click simple
        cuentaAtras = setTimeout("click_simple()",intervalo);
    fecha_click_anterior = fecha_click;        // la fecha anterior será la actual para futuros clicks
}


</script>

Funciona bien según he podido comprobar.

Sinceramente, me parece mala implementación del navegador... menos mal que tenemos cabeza para solucionarlo.

Un saludo, espero que así te sirva.

PD: El tiempo entre click y click para considerarlo doble se configura en cada sistema operativo, puede dar problemas de accesibilidad, yo pondría más bien 500 que 200 para que no haya tanto riesgo. Incluso más, pero tienes el handicap de la demora en la acción del simple click.