»

jQuery Click/Double Click

The battle of the standards is constantly a struggle. I found myself needing a solution to the jQuery Click/Double Click problem. This example will send one click or double click to the helper functions. Compatible with Firefox 2+, Chrome 4+, and IE > 6+. Thanks Allan G for your update. Using $.live binds directly to the click handler allowing for new element checking. Use $.bind if you don’t have dynamic content or $.bind inside of $.ready.

var clicktimer;
var e_click;
var id_click;
 
$(/* Your Sender */).live('click', function(ev)
{
    var browser=navigator.appName;
    var b_version=navigator.appVersion;
    var version=parseFloat(b_version);
 
    if((browser=="Microsoft Internet Explorer")
       && (version==6))
    {
        //Just do the primary action
    }
    else
    {
        e_click = ev;
        id_click = this.id;
        clicktimer = window.setTimeout(function () {
            if(e_click)
            {
                SingleClickAction();
                clearTimeout(clicktimer);
                clicktimer = null;
            }}, 300);
    }
}).dblclick(function(ev)
{        
    window.clearTimeout(clicktimer);        
    e_click = null;
    id_click = null;
    DoubleClickAction();    
});
 
function SingleClickAction()
{
   //Do Something
}
function DoubleClickAction()
{
   //Do Something
}

This entry was posted on Monday, May 4th, 2009 at 10:13 am and is filed under jQuery. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

4 Responses to “jQuery Click/Double Click”

  1. Onkabetse says:
    9/17/10 at 8:15 am

    Hey, thanks, finally i found something that worked on both chrome, explorer and firefox. Thanks once again.

  2. Dave Thompson says:
    11/7/10 at 10:15 am

    Didn’t work for me. I had to use onclick=”function();” to have it work properly cross browser.

  3. Shawn says:
    12/4/10 at 11:27 pm

    If you are attaching it to a button or link you would need to disable the primary event.

  4. Allan G says:
    7/10/11 at 5:24 pm

    To make this work I had to wrap the timeout in a funtion

    clicktimer = window.setTimeout( function() {
    if(e_click)
    {
    SingleClickAction(thisID);
    clearTimeout(clicktimer);
    clicktimer = null;
    }}, 300);

    I also changed the .click and .dblclick events to .live(‘click’, function() { etc..

Leave a Reply