how to add dbclick() on right click in jquery

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.

Because the right-click has meaning to the user agent that is outside the purview of javascript (the context menu), you're going to have to do some dancing around.

First, you should disable the context menu on the target element:

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

Now, when we right click, there won't be the context menu messing up the second click.

Next, understand that "double-click right" does not, generally speaking, exist. Even though you can bind the dblclick event, that isn't a generic event. "Double-click" is, by definition, double-clicking with the left mouse button.

So, we'll have to use the mousedown event, check to see how many times the right has been clicked, and react after two. I created a small helper function that keeps track of the click count and resets the state after a short time-frame.

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");
    }
});

Try it here: http://jsfiddle.net/94L7z/

You can adjust the sensitivity rate, allowing for shorter or longer double-clicks, depending on your preference.

Documentation

• element.onContextMenu on MDN - https://developer.mozilla.org/en-US/docs/DOM/window.oncontextmenu
• element.onMouseDown on MDN - https://developer.mozilla.org/en-US/docs/DOM/element.onmousedown
• window.setTimeout on MDN - https://developer.mozilla.org/en-US/docs/DOM/window.setTimeout
• jQuery event.which - http://api.jquery.com/event.which/
• "Javascript Madness: Mouse Events" on UnixPapa.com, an article showing some tests related to mouse events and the left/right buttons - http://unixpapa.com/js/mouse.html

The problem is the concept of double clicking is only relevant to the left mouse button as far as JS is concerned. So no matter how many time, and how fast you click the right mouse button, it just registers as a bunch of single clicks. So what to do?

1. Create a global variable to track click count
2. detect a single right-click, you already know how to do this it seems
3. set the global variable that the right-click was fired once
4. set a timeout, so if another right click doesn't come through in a reasonable time to be considered a dblclick the global variable resets to 0. I recommend 300 ms, it seems to be the most natural
5. each time a right-click registers check that variable, if it's more than one, fire your double-right-click handler.
6. you may want to make that global variable an object so you can track which element registered the right click and expire specific element right clicks accordingly. This will allow you to ignore if they double click while moving the mouse over various objects. I consider this optional as the chain of events are unlikely for a user to follow, but depending on your app may result in unexpected functionality.

It might be better to define a jQuery function with this (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;
        }
    });
});