how to add dbclick() on right click in jquery

Question

Hi I want to have a dblclick() on the right click as the google maps have to zoom in and zoom out. Is there any way to do that. I have written the dblclick but now its working with only left click. Any pointers on how to do this. Here is my code

         $("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

There is another way you could detect a double right-click that does not involve fiddling with timers or keeping track of click counts manually. Using the .detail property of the event object in a mouseup or mousedown event. .detail holds the click count which will tell you how many clicks have happened recently. If .detail === 2 it was a double-click.

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

You might notice that I am using evt.originalEvent.detail to access the property instead of just .detail. This is because jQuery provides it's own version of the event object which does not include .detail, but you can access the original event object that the browser returned via .originalEvent. If you were using pure JavaScript instead of jQuery you would just use evt.detail.

Here's a working example.

Answer 2

There is no real way to do it, you can emulate it by taking the default timer for double clicks which IIRC is 300ms:

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/