10

I've toggled click event to a node and I want to toggle a dbclick event to it as well. However it only triggers the click event when I dbclick on it.

So How do I set both events at the same time?

5 Answers 5

16

You have to do your "own" doubleclick detection

Something like that could work:

var clickedOnce = false;
var timer;

$("#test").bind("click", function(){
    if (clickedOnce) {
        run_on_double_click();
    } else {
        timer = setTimeout(function() {
           run_on_simple_click(parameter);
        }, 150);
        clickedOnce = true;
    }
});

function run_on_simple_click(parameter) {
    alert(parameter);
    alert("simpleclick");
    clickedOnce = false;
}

function run_on_double_click() {
    clickedOnce = false;
    clearTimeout(timer);
    alert("doubleclick");
}

Here is a working JSFiddle

For more information about what delay you should use for your timer, have a look here : How to use both onclick and ondblclick on an element?

6
  • I think we should do something like this: Wait for the click function. If nothing happens for a second or so after the click function then alert("single click"). Or if there is another click event within a second after the first click then alert("dbl click"). What do you think? Aug 19, 2013 at 6:22
  • This is what I do. But the delay I put is maybe too small. Try to play with it, if you wanna experienced with click/doubleclick without having to click like crazy. :D
    – Jeremy D
    Aug 19, 2013 at 6:23
  • Great solution. However is there any way to pass a parameter to the timeout callback? Aug 19, 2013 at 8:05
  • I found it myself. Here's the solution to my question Aug 19, 2013 at 8:09
  • @SolessCHong, my solution was close. You didn't specify in your question that you needed a parameter for the callback. I edited my answer to take that in account.
    – Jeremy D
    Aug 19, 2013 at 19:08
3
$("#test-id").bind("click dblclick", function(){alert("hello")});

Works for both click and dblclick

EDIT --

I think its not possible. I was trying something like this.

$("#test").bind({
    dblclick: function(){alert("Hii")},
    mousedown: function(){alert("hello")}

});

But its not possible to reach double click without going through single click. I tried mouse down but it does not give any solution.

6
  • How to bind different functions to these two events? Aug 19, 2013 at 6:04
  • So you want one two seperate functions. One for single click and another for double click? Aug 19, 2013 at 6:06
  • You should probably do a custom double-click, because it is in practice impossible to detect if a click was a doubleclick natively, as a double click is composed of two clicks. Just use a function where you check if the user clicks twice in a certains amount of time.
    – Jeremy D
    Aug 19, 2013 at 6:08
  • @SwaroopNagendra the dblclick as no effect in your example. The alert shows up at the first click.
    – Jeremy D
    Aug 19, 2013 at 6:10
  • Yes he is right. The only way to reach dblclick is by two single clicks. I dont know wether it is possible or not Aug 19, 2013 at 6:12
1

I pretty much used the same logic as Jeremy D.

However, in my case, it was more neat to solve this thing with anonymous functions, and a little slower double click timeout:

dblclick_timer = false
.on("click", function(d) {
    // if double click timer is active, this click is the double click
    if ( dblclick_timer )
    {
        clearTimeout(dblclick_timer)
        dblclick_timer = false
        // double click code code comes here
        console.log("double click fired")
    }
    // otherwise, what to do after single click (double click has timed out)
    else dblclick_timer = setTimeout( function(){
        dblclick_timer = false
        // single click code code comes here
        console.log("single click fired")
    }, 250)
})
0

you need to track double click and if its not a double click perform click action. Try this

<p id="demo"></p>
<button id='btn'>Click and DoubleClick</button>
<script>
var doubleclick =false;
var clicktimeoutid = 0;
var dblclicktimeoutid = 0;
var clickcheck = function(e){
    if(!clicktimeoutid)
        clicktimeoutid = setTimeout(function(){
            if(!doubleclick)
                performclick(e);
            clicktimeoutid  =0;
        },300);
}

var performclick =function(e){
     document.getElementById("demo").innerHTML += 'click';  
}
var performdblclick = function(e)
{
    doubleclick = true;
    document.getElementById("demo").innerHTML += 'dblclick';
    dblclicktimeoutid  = setTimeout(function(){doubleclick = false},800);
};
document.getElementById("btn").ondblclick = performdblclick;
document.getElementById("btn").onclick=clickcheck;
</script>
0

a slightly different approach - The actual click comparison happens later in the timeOut function, after a preset interval... till then we simply keep tab on the flags.

& with some simple modifications (click-counter instead of flags) it can also be extended to any number of rapid successive clicks (triple click, et al), limited by practicality.

var clicked = false,
    dblClicked = false,
    clickTimer;



function onClick(param){
    console.log('Node clicked. param - ',param);
};

function onDoubleClick(param){
    console.log('Node Double clicked. param - ',param);
};

function clickCheck(param){
    if (!clicked){
        clicked = true;
        clickTimer = setTimeout(function(){
            if(dblClicked){
                onDoubleClick(param);
            }

            else if(clicked){
                onClick(param);
            }

            clicked = false;
            dblClicked = false;
            clearTimeout(clickTimer);

        },150);
    } else {
        dblClicked = true;
    }
};

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.