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 = $'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)  
        $'clicks', clicks);


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


  1. User Avatar

    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. User Avatar
    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. User Avatar
    Rafael Coelho
    Permalink to comment#

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

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

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

    I Really appreciate the function, Thank’s !

  4. User Avatar
    Jason Robinson
    Permalink to comment#

    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


    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. User Avatar
    Permalink to comment#

    I made jquery plugin, which implements real triple click event:

    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!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.