Wednesday, April 1st, 2009

Building a triple click

Category: JavaScript, Library

Brandon Aaron has a nice article on building a special event for triple clicking on an element using jQuery.

To illustrate the API I’m going to create a new event type called “tripleclick”. To be fired it will require the user click the element three times. If we were to make this a typical jQuery plugin we would create jQuery.fn.tripleclick. However, I want to be able to take advantage of the bind syntax along with the other benefits like event normalization, data, and namespaces that the jQuery event system provides.

The first thing we need to do is create the special event. Each special event has a setup and a teardown method. The setup method gets called when the event is bound and the teardown method gets called when the event is unbound.

It is important to note that these two methods only get called the first time an event of a particular type is bound/unbound per an element. This is because the jQuery event system actually only binds one handler per an event type per an element and manages the other bound handlers itself. In jQuery 1.3 there is a new special event type called “Special All” that operates for all handlers but has a slightly different behavior. However, that is for another article.

it leaves us with:


  1. jQuery.event.special.tripleclick = {
  2.     setup: function(data, namespaces) {
  3.         var elem = this, $elem = jQuery(elem);
  4.         $elem.bind('click', jQuery.event.special.tripleclick.handler);
  5.     },
  7.     teardown: function(namespaces) {
  8.         var elem = this, $elem = jQuery(elem);
  9.         $elem.unbind('click', jQuery.event.special.tripleclick.handler);
  10.     },
  12.     handler: function(event) {
  13.         var elem = this, $elem = jQuery(elem), clicks = $'clicks') || 0;
  14.         clicks += 1;
  15.         if ( clicks === 3 ) {
  16.             clicks = 0;
  17.             // set event type to "tripleclick"
  18.             event.type = "tripleclick";
  19.             // let jQuery handle the triggering of "tripleclick" event handlers
  20.             jQuery.event.handle.apply(this, arguments)
  21.         }
  22.         $'clicks', clicks);
  23.     }
  24. };

Posted by Dion Almaer at 3:19 am

2.9 rating from 40 votes


Comments feed TrackBack URI

There probably should be a timer in order to reset clicks count.

Imagine if dblclick wouldn’t have such timer. :)

Comment by kuindji — April 1, 2009

yep – and clicks should reset on mousemove.

i’ve implemented triple-click on a project and it can work really well.

Comment by adamjimenez — April 1, 2009

aprils fool?

Comment by joggink — April 1, 2009

The most trivial code ever?

Comment by Darkimmortal — April 1, 2009

Def. April Fool. We can only pray.

Comment by nataxia — April 1, 2009

@everyone… No it is not an April fools joke. It was published on March 26th. This is an article about the special events api/hooks within jQuery. The tripleclick event is purposely simple to illustrate/focus on the api/hooks themselves. I explicitly mention that one could enhance the tripleclick event with timing restrictions using the event.timeStamp. One could also listen to the mouse move event and reset the number of click as well. But again the article focuses on the special events … not on how to create a tripleclick event nor what a tripleclick event should be.

Comment by iambrandonaaron — April 1, 2009

Haha. Dion made an unfortunate choice with the Ajaxian title. Maybe it should have been something like, “Creating Special Events with jQuery”.

Despite that, I am pretty sure Opera used this jQuery API when creating their special Face Gesture events.

event.type = “rollEyes”;

Comment by GregHouston — April 1, 2009


hmm, this doesn’t seem to work.

Comment by rasmusfl0e — April 1, 2009

Leave a comment

You must be logged in to post a comment.