cómo agregar dbclick() al hacer clic con el botón derecho en jquery

Question

Hola, quiero hacer clic con el botón derecho() en los mapas de Google para acercar y alejar la imagen. Hay alguna forma de hacer eso. He escrito el clic doble, pero ahora está trabajando con solo el clic izquierdo. Cualquier sugerencia sobre cómo hacer esto. Aquí está mi código

  $("div#demo1").dblclick(function(e) { 
      //alert(e.getElementById()); 

      if((!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1)) { 
       alert("Left Mouse Button was clicked on demo1 div!"); 
       $("div.window").animate({ 
       'height':'+=20', 'width':'+=20' 
       },0,function(){ 
        jsPlumb.repaintEverything(); 
        jsPlumb.repaintEverything(); 
       }); 
       // Left mouse button was clicked (all browsers) 
      } 
      else if((!$.browser.msie && e.button == 2) || ($.browser.msie && e.button == 3)) { 
       alert("right click double"); 
      } 
     }); 

Answer 1

No hay forma real de hacerlo, puede emular tomando el contador de tiempo predeterminado por los clics dobles que IIRC es de 300 ms:

function makeDoubleRightClickHandler(handler) { 
    var timeout = 0, clicked = false; 
    return function(e) { 

     e.preventDefault(); 

     if(clicked) { 
      clearTimeout(timeout); 
      clicked = false; 
      return handler.apply(this, arguments); 
     } 
     else { 
      clicked = true; 
      timeout = setTimeout(function() { 
       clicked = false; 
      }, 300); 
     } 
    }; 
} 

$(document).contextmenu(makeDoubleRightClickHandler(function(e) { 
    console.log("double right click"); 
})); 

http://jsfiddle.net/5kvFG/2/

Answer 2

El El problema es que el concepto de doble clic solo es relevante para el botón izquierdo del mouse en lo que concierne a JS. Por lo tanto, no importa la cantidad de tiempo y la velocidad con la que haga clic con el botón derecho del mouse, solo se registra como un grupo de clics individuales. ¿Entonces lo que hay que hacer?

1. Crear una variable global para rastrear haga clic en número
2. detectar un único botón derecho del ratón, usted ya sabe cómo hacer esto parece
3. establecer la variable global que el botón derecho del ratón se disparó una vez
4. establece un tiempo de espera, por lo que si otro clic derecho no aparece en un tiempo razonable para ser considerado un clic doble la variable global se restablece a 0. Recomiendo 300 ms, parece ser el más natural
5. cada vez un clic derecho registra cheque tha t variable, si es más que uno, ejecute el controlador de doble clic con el botón derecho.
6. es posible que desee convertir esa variable global en un objeto para que pueda rastrear qué elemento registró el clic derecho y caducar el elemento específico haciendo clic con el botón derecho en consecuencia. Esto le permitirá ignorar si hacen doble clic en mientras mueve el mouse sobre varios objetos. Considero que este es opcional ya que es poco probable que el usuario siga la cadena de eventos, , pero dependiendo de su aplicación puede resultar en una funcionalidad inesperada.

Answer 3

Dado que el clic derecho tiene un significado para el agente de usuario que está fuera del alcance de javascript (el menú contextual), tendrá que bailar un poco.

primer lugar, debe desactivar el menú contextual en el elemento de destino:

document.getElementById('demo1').oncontextmenu = function() { 
    return false; 
}; 

Ahora, cuando damos click derecho, no habrá el menú contextual echar a perder la segunda posición.

A continuación, entiendo que, en términos generales, "doble clic derecho" no existe. Aunque puede vincular el evento dblclick, no es un evento genérico. "Hacer doble clic" es, por definición, hacer doble clic con el botón izquierdo del mouse.

Por lo tanto, tendremos que usar el evento mousedown, verificar cuántas veces se ha hecho clic en el derecho y reaccionar después de dos. Creé una pequeña función de ayuda que realiza un seguimiento del recuento de clics y restablece el estado después de un corto período de tiempo.

var RightClick = { 
    'sensitivity':350, 
    'count':0, 
    'timer':false, 
    'active':function() { 
     this.count++; 
     this.timer = setTimeout(
      this.endCountdown.bind(this), 
      this.sensitivity 
     ); 
    }, 
    'endCountdown': function() { 
     this.count = 0; 
     this.timer = false; 
    } 
}; 
$("div#demo1").mousedown(function(e) { 
    if(e.which == 3) { 
     RightClick.active(); 
     if (RightClick.count == 2) 
      alert("right click double"); 
    } 
}); 

Inténtelo aquí: http://jsfiddle.net/94L7z/

Se puede ajustar la tasa de sensibilidad, lo que permite más cortos o más largos hace doble clic, dependiendo de su preferencia.

Documentación

• element.onContextMenu el MDN - https://developer.mozilla.org/en-US/docs/DOM/window.oncontextmenu
• element.onMouseDown el MDN - https://developer.mozilla.org/en-US/docs/DOM/element.onmousedown
• window.setTimeout el MDN - https://developer.mozilla.org/en-US/docs/DOM/window.setTimeout
• jQuery event.which - http://api.jquery.com/event.which/
• "Javascript Madness: Eventos del ratón" en la UnixPapa.com, un artículo mostrando algunas pruebas relacionadas con eventos de ratón y los botones izquierda/derecha - http://unixpapa.com/js/mouse.html

Answer 4

Podría ser mejor para definir una función jQuery con esta (try it):

var precision = 400; 
var lastClickTime = 0; 

$(document).ready(function() 
{ 
    var div = $('#div'); 

    $(div).bind("contextmenu", function(e) 
    { 
     return false; 
    }); 

    $(div).mousedown(function(event) 
    { 
     if (event.which == 3) 
     { 
      var time = new Date().getTime(); 

      if(time - lastClickTime <= precision) 
      { 
       // DOUBLE RIGHT CLICK 
       alert('double click'); 
      } 

      lastClickTime = time; 
     } 
    }); 
}); 

Answer 5

Hay otra manera se podría detectar un doble clic con el botón derecho que no implica tocar el violín con temporizadores o hacer el seguimiento de un recuento de clics de forma manual. Utilizando la propiedad .detail del objeto de evento en un evento mouseup o mousedown. .detail contiene el click count que le indicará cuántos clics han sucedido recientemente. Si .detail === 2 fue un doble clic.

// suppress the right-click menu 
$('#target').on('contextmenu', function (evt) { 
    evt.preventDefault(); 
}); 

$('#target').mouseup(function (evt) { 
    if (evt.which === 3) { // right-click 
    /* if you wanted to be less strict about what 
     counts as a double click you could use 
     evt.originalEvent.detail > 1 instead */ 
    if (evt.originalEvent.detail === 2) { 
     $(this).text('Double right-click'); 
    } else if (evt.originalEvent.detail === 1) { 
     $(this).text('Single right-click'); 
    } 
    } 
}); 

Usted puede notar que estoy usando evt.originalEvent.detail acceder a la propiedad en lugar de sólo .detail. Esto se debe a que jQuery proporciona su propia versión del objeto de evento que no incluye .detail, pero puede acceder al objeto de evento original que el navegador devolvió a través del .originalEvent. Si estuviera usando JavaScript puro en lugar de jQuery, simplemente usaría evt.detail.

Aquí hay un working example.