making my click double-click event working

Question

Hi I am working on a click double-click event handler for my jquery ajax engine. The idea is that you can click or double-click a button. I wrote this myself but I don't see why it is not working.

this is the code:

$('body').on('click', '.double-click', function() {
    var that = this;
    var dblclick = $(that).data('clicks');
    if(!dblclick){
        dblclick = 0;
    }
    dblclick = dblclick + 1;
    $(that).data('clicks', dblclick);
    dblclick = $(that).data('clicks');
    console.log('click - ' + dblclick);

    if(dblclick > 1){
        $(this).data('clicks', 0);
        //ajaxloader(this, 1);
        alert('dubbel-klik');
        console.log('dubbelcik event');
    }   

    setTimeout(function() {
        if(dblclick == 1){
            $(that).data('clicks', 0);
            //ajaxloader(this, 0);
            alert('klik');
            console.log('single click event');
        }
    }, 400);
});

It maybe looks a little over complicated but that is because I tried out some stuff. The problem I have is that when I double-click the double click the single click gets also executed. How is this possible when I reset with $(this).data('clicks', 0);. Then the counter has to be 0 and the if statement in the timeout has to be false.

Someone knows what is going wrong!?

O yes see a working demo here: click the click en dubbelclick button

Community · Accepted Answer · 2017-05-23 12:04:59Z

2

You're overcomplicating this. jQuery has all of this built-in:

$('body').on('click', function(){ 
    alert("single click")
});
$('body').on('dblclick', function(){
    alert("double click");
});

This will also click the single though: you might want to check out this thread to see what you could do to prevent that: Javascript with jQuery: Click and double click on same element, different effect, one disables the other

edited May 23, 2017 at 12:04

CommunityBot

11 silver badge

answered May 3, 2013 at 20:45

Kenneth

28.8k7 gold badges65 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

botenvouwer Over a year ago

I want to use the two on the same elements. that does not work so that is the reason I wrote my script which by the way is just as complicated if you compare with the scripts I find behind the link you give me.

Kenneth Over a year ago

Well, you can take a look at those scripts. Since they work you will find your answer in there. We could copy their answer here, but it's better you take a look at how they solved it.

botenvouwer Over a year ago

Well you are welcome I already fixed it. I shall remove my question because it already exists.

Collectives™ on Stack Overflow

making my click double-click event working

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related