javascript - dblclick - onmouseout

¿Cómo usar tanto onclick como ondblclick en un elemento?

Question

Tengo un elemento en mi página que necesito adjuntar a los manejadores de eventos clickclick y ondblclick. Cuando ocurre un solo clic, debe hacer algo diferente a un doble clic. Cuando comencé a tratar de hacer que esto funcionara, mi cabeza comenzó a dar vueltas. Obviamente, onclick siempre se activará cuando haga doble clic. Así que traté de usar una estructura basada en tiempo de espera como esta ...

window.onload = function() {
  var timer;
  var el = document.getElementById(''testButton'');

  el.onclick = function() {
    timer = setTimeout(function() { alert(''Single''); }, 150);        
  }

  el.ondblclick = function() {
    clearTimeout(timer);
    alert(''Double'');
  }
}

Pero obtuve resultados inconsistentes (usando IE8). Funcionaría correctamente muchas veces, pero a veces recibiría la alerta "Individual" dos veces.

¿Alguien ha hecho esto antes? ¿Hay una manera más efectiva?

Answer 1

Al igual que Matt, tuve una experiencia mucho mejor cuando aumenté ligeramente el valor del tiempo de espera. Además, para mitigar el problema de disparar con un solo clic dos veces (que de todos modos no pude reproducir con el temporizador superior), agregué una línea al manejador de un solo clic:

el.onclick = function() {
    if (timer) clearTimeout(timer);
    timer = setTimeout(function() { alert(''Single''); }, 250);        
}

De esta forma, si el clic ya está configurado para disparar, se borrará para evitar alertas "únicas" duplicadas.

Answer 2

Pequeño arreglo

       if(typeof dbtimer != "undefined"){
            dbclearTimeout(timer);
            timer = undefined;
            //double click
        }else{
            dbtimer = setTimeout(function() { 
            dbtimer = undefined;
            //single click
            }, 250);
        }

Answer 3

Sencillo:

obj.onclick=function(e){
   if(obj.timerID){
          clearTimeout(obj.timerID);
          obj.timerID=null;
          console.log("double")
         }
       else{
          obj.timerID=setTimeout(function(){
                                            obj.timerID=null;
                                            console.log("single")
                                            },250)}
}//onclick

Answer 4

Si recibe 2 alertas, parece que su umbral para detectar un doble clic es demasiado pequeño. Intenta aumentar de 150 a 300 ms.

Además, no estoy seguro de que tenga garantizado el orden en que se activan los clics y los clics. Por lo tanto, cuando se apaga su doble clic, se borra el primer clic, pero si se dispara antes del segundo evento de "clic", este segundo evento continuará disparándose por sí solo, y usted terminará con un evento de doble clic. disparar y disparar un evento con un solo clic.

Veo dos posibles soluciones a este problema potencial:

1) Establezca otro tiempo de espera para disparar realmente el evento de doble clic. Marque en su código que el evento de doble clic está a punto de disparar. Luego, cuando se activa el segundo evento de ''solo clic'', puede verificar este estado y decir "oops, dbl haga clic en pendiente, así que no haré nada".

2) La segunda opción es intercambiar sus funciones de destino en función de los eventos de clic. Puede parecerse a esto:

window.onload = function() {
  var timer;
  var el = document.getElementById(''testButton'');

  var firing = false;
  var singleClick = function(){
    alert(''Single'');
  };

  var doubleClick = function(){ 
    alert(''Double'');
  };

  var firingFunc = singleClick;

  el.onclick = function() {
    // Detect the 2nd single click event, so we can stop it
    if(firing) 
      return;

    firing = true;
    timer = setTimeout(function() { 
       firingFunc(); 

       // Always revert back to singleClick firing function
       firingFunc = singleClick;
       firing = false;
    }, 150);

  }

  el.ondblclick = function() {
    firingFunc = doubleClick; 
    // Now, when the original timeout of your single click finishes, 
    // firingFunc will be pointing to your doubleClick handler        
  }
}

Básicamente, lo que está sucediendo aquí es que dejes que el tiempo de espera original que establezcas continúe. Siempre llamará a dispararFunc (); Lo único que cambia es a lo que apuntaba en realidad el disparo de Func (). Una vez que se detecta el doble clic, lo establece en doubleClick. Y luego siempre volvemos a SingleClick una vez que expira el tiempo de espera.

También tenemos una variable de "activación" allí para saber interceptar el segundo evento de un solo clic.

Otra alternativa es ignorar por completo los eventos dblclick y simplemente detectarlo con un solo clic y el temporizador:

window.onload = function() {
  var timer;
  var el = document.getElementById(''testButton'');

  var firing = false;
  var singleClick = function(){
    alert(''Single'');
  };

  var doubleClick = function(){ 
    alert(''Double'');
  };

  var firingFunc = singleClick;

  el.onclick = function() {
    // Detect the 2nd single click event, so we can set it to doubleClick
    if(firing){
      firingFunc = doubleClick; 
      return;
    }

    firing = true;
    timer = setTimeout(function() { 
       firingFunc(); 

       // Always revert back to singleClick firing function
       firingFunc = singleClick;
       firing = false;
    }, 150);

  }
}

Esto no ha sido probado :)

Answer 5

,   cellclick   :   
        function(){
            setTimeout(function(){
                if (this.dblclickchk) return;
                setTimeout(function(){
                    click event......                   
                },100);
            },500);
        }

,   celldblclick    :   
        function(){
            setTimeout(function(){
                this.dblclickchk    =   true;
                setTimeout(function(){
                                          dblclick event.....
                },100);
                setTimeout(function(){
                    this.dblclickchk = false;
                },3000);
            },1);
        }