JavaScript Example 3-1
Catching Mouse Events (Events #2)

The first part of the example code is based on the IRT Javascript event-handling tutorial, http://www.irt.org/articles/js196/index.htm, by Ryan Detert. The extended event handler is pretty much my own.

I want to be able to distinguish between Click and dblClick events. But there are several problems with this. (1) in both IE and NN4, the action of double clicking will result in your getting a Click event before you get a dblClick. (2) In NN4 (tested with 4.74) you also get an additional Click event after the Double click.

Basic Handling of Click Events

Here's the example from IRT. First, define a simple event handler which will report the type of event which it received:

 <script language="JavaScript"><!--
 function handleMe(which) {
     document.forms[0].elements[0].value += which + " fired... Then ";
 }
 //-->
 </script>

Now trigger the event handler with click events:

Click This Text Any Way You See Fit.

The HTML code for the above has been somewhat modified from the IRT example to make it work with Netscape. Note the use of href="javascript:void(0)" in the anchor tag.

<p>
    <a href="javascript:void(0)" 
         onclick="handleMe(event.type)" 
         onmousedown="handleMe(event.type)" 
         onmouseup="handleMe(event.type)"
         ondblclick="handleMe(event.type)" 
         style="color: blue; font-family: arial; cursor: hand">
 Click This Text Any Way You See Fit.
 </a>
 </p>

 <form>
 <table>
 <tr><td valign="top">
     Event Being Handled:
     <textarea rows="4" cols="60" wrap="soft"></textarea>
 </td></tr>
 <tr><td valign="top">
     <input type="Reset">
 </td></tr>
 </table>
 </form>

You'll notice that a doubleclick causes a click event first. How to distinguish between the two? And what about the extra click event after the doubleclick in Netscape?

Distinguishing Between Click and DblClick on the Same Object

All of the examples I've seen for using the dblClick event assume that you won't try to handle the Click event at all. In other words you can doubleclick on something but not single click it. My objective is to distinguish the two on the same object so I can give them different meanings.

I'll try adding some smarts to the event handler so that it will ignore a click event if a doubleclick event occurs within some time window. A doubleclick event will also set a flag that will cause any subsequent click event to be ignored if it occurs within some time window.

Let's try it. Once again, trigger the event handler with click events:

Click This Text Any Way You See Fit.

Much to my surprise, this actually seems to work quite well with both Netscape and IE. The form code is basically the same as previously, except for removal of the mouseup and mousedown events. Here is the event handler code:

 var dcTime=250;    // doubleclick time
 var dcDelay=100;   // no clicks after doubleclick
 var dcAt=0;        // time of doubleclick
 var savEvent=null; // save Event for handling doClick().
 var savEvtTime=0;  // save time of click event.
 var savTO=null;    // handle of click setTimeOut
 
 function showMe(form, txt) {
   document.forms[form].elements[0].value += txt;
 }
 
 function hadDoubleClick() {
   var d = new Date();
   var now = d.getTime();
   showMe(1, "Checking DC (" + now + " - " + dcAt);
   if ((now - dcAt) < dcDelay) {
     showMe(1, "*hadDC*");
     return true;
   }
   showMe(1, " OK ");
   return false;
 }
 
 function handleWisely(which) {
   showMe(1, which + " fired...");
   switch (which) {
     case "click": 
       // If we've just had a doubleclick then ignore it
       if (hadDoubleClick()) return false;
         
       // Otherwise set timer to act.  It may be preempted by a doubleclick.
       savEvent = which;
       d = new Date();
       savEvtTime = d.getTime();
       savTO = setTimeout("doClick(savEvent)", dcTime);
       break;
     case "dblclick":
       doDoubleClick(which);
       break;
     default:
   }
 }
 
 function doClick(which) {
   // preempt if DC occurred after original click.
   if (savEvtTime - dcAt <= 0) {
     showMe(1, "ignore Click");
     return false;
   }
   showMe(1, "Handle Click.  ");
 }
 
 function doDoubleClick(which) {
   var d = new Date();
   dcAt = d.getTime();
   if (savTO != null) {
     clearTimeout( savTO );          // Clear pending Click  
     savTO = null;
   }
   showMe(1, "Handle DoubleClick at " + dcAt);
 }

Resources

Netscape JavaScript Developer's Guide

See the section on Events

Netscape JavaScript Reference Manual

Refer to the section on Events

IRT

The IRT Javascript event-handling tutorial by Ryan Detert.