Triple Click Event | CSS-Tricks

$.event.special.tripleclick = {

    setup: function(data, namespaces) {
        var elem = this, $elem = jQuery(elem);
        $elem.bind('click', jQuery.event.special.tripleclick.handler);
    },

    teardown: function(namespaces) {
        var elem = this, $elem = jQuery(elem);
        $elem.unbind('click', jQuery.event.special.tripleclick.handler)
    },

    handler: function(event) {
        var elem = this, $elem = jQuery(elem), clicks = $elem.data('clicks') || 0;
        clicks += 1;
        if ( clicks === 3 ) {
            clicks = 0;

            // set event type to "tripleclick"
            event.type = "tripleclick";
            
            // let jQuery handle the triggering of "tripleclick" event handlers
            jQuery.event.handle.apply(this, arguments)  
        }
        $elem.data('clicks', clicks);
    }
    
};

Usage

$("#whatever").bind("tripleclick", function() {
   // do something
}

Comments

Eric

# May 11, 2011

Works fine except for 1 issue;

if u click 1ce then move yr mouse around the page, then come back to click again then hover off again then back again, it still fires, so as long as there has been 3 clicks on it. that is not really a triple click in succession, its more like “as long as it gets 3 clicks…”

how about u bind a mouseout event that resets the clicks back to 0 whenever the mouse hovers off the object

JEEzahs

# June 28, 2011

Is there a way to reset these special events and reset the dom with some sort of clear link so it will rebuild?

I am using the triple click event to allow someone to click into an image 3 times and then the x,y coordinates for each click are put into a text input box.

The problem i am having, is if the user makes a mistake, and would like to start over, i can’t seem to destroy the event and then have it reset it self so it will work for the user again. It will destroy the event, but it still clicks and marks the coordinates into the input form. I need a total reset without actually posting.

The only way i can figure out how to do this is by trying to post the form, after clearing it out so that it triggers a null input error, which then redraws the page and starts fresh because of the validation error. I have tried to unbind and destroy the event, but the clicks still work and go into my hidden input form. argh :)
Ben Alman has a great write up on special events but it seems to be too long for me to stay patient and read it fully.

Rafael Coelho

# August 3, 2011

Hey, nice Function, about the Issue I found a simple correction:

add this following line just after “clicks += 1;”

setTimeout(function(){ clicks=0; $elem.data(‘clicks’,0); },500);

I Really appreciate the function, Thank’s !

Hoed

# June 28, 2012

I adapted it a little bit so that you have to triple click within a sec.

Hope it’s useful:


$.event.special.tripleclick = {

    setup: function(data, namespaces) {
        var elem = this, $elem = jQuery(elem);
        $elem.bind('click', jQuery.event.special.tripleclick.handler);
    },

    teardown: function(namespaces) {
        var elem = this, $elem = jQuery(elem);
        $elem.unbind('click', jQuery.event.special.tripleclick.handler)
    },

    handler: function(event) {
        var elem = this, $elem = jQuery(elem), clicks = $elem.data('clicks') || 0, start = $elem.data('startTimeTC') || 0;
        if ((new Date().getTime() - start)>= 1000) {
            clicks = 0;
        }
        clicks += 1;
        if(clicks === 1) {
            start = new Date().getTime();
        }
        
        if ( clicks === 3 ) {
            clicks = 0;

            // set event type to "tripleclick"
            event.type = "tripleclick";
            
            // let jQuery handle the triggering of "tripleclick" event handlers
            jQuery.event.handle.apply(this, arguments)  
        }
        
        $elem.data('clicks', clicks);
        $elem.data('startTimeTC', start);
    }
    
};

Jason Robinson

# April 10, 2013

Awesome thanks! I used the version by @Hoed in the end, but had to make the following change;

jQuery.event.handle.apply(this, arguments)

Change to

$elem.trigger('tripleclick');

jQuery.event.handle was giving undefined for me, but I got it to work by making this change. Any ideas why? :) Anyway, if someone encounters the same situation.

Deliaz

# December 21, 2014

I made jquery plugin, which implements real triple click event:
https://github.com/Deliaz/jquery-trplclick

When I said ‘real event’, I mean that the ‘trplclick’ event will be triggered only when all three clicks are fired with same interval.

noam

# August 27, 2019

in the line:
jQuery.event.handle.apply(this, arguments)

handle is deprecated and should use dispatch
jQuery.event.dispatch.apply(this, arguments)

Usage

Comments

Leave a Reply Cancel reply