Grow your CSS skills. Land your dream job.

Last updated on:

Triple Click Event

$.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
}

Reference URL

Comments

  1. Eric

    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

  2. JEEzahs
    Permalink to comment#

    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.

  3. 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 !

  4. 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.

  5. Permalink to comment#

    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.

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".