The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Triple Click Event

Last updated on:
$.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

Reference URL


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

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed