9

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?

SolessChong
  • 3,370
  • 8
  • 40
  • 67

5 Answers5

15

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?

Community
  • 1
  • 1
Jeremy D
  • 4,787
  • 1
  • 31
  • 38
  • 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? – Swaroop Nagendra Aug 19 '13 at 06: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 '13 at 06:23
  • Great solution. However is there any way to pass a parameter to the timeout callback? – SolessChong Aug 19 '13 at 08:05
  • I found it myself. Here's the [solution to my question](http://stackoverflow.com/a/5520159/1921437) – SolessChong Aug 19 '13 at 08: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 '13 at 19:08
  • @JeremyD Yes, your solution was perfect for my question and that was a follow up. – SolessChong Aug 20 '13 at 01:42
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.

Swaroop Nagendra
  • 609
  • 2
  • 15
  • 25
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)
})
Robin Manoli
  • 2,162
  • 2
  • 25
  • 30
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>
Aamir Syed
  • 131
  • 5
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;
    }
};
DhavalW
  • 40
  • 3