Is it possible to call both events onclick,ondblclick in div tag?

**RamananKalirajan** · Dec 2 '09, 07:23 AM

This example will answer your question....

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Cancel Click</title>
<script type="text/javascript">

var iTimeoutId = null;

function startSingleClick()
{
  showMessage("Single click received");
  iTimeoutId = setTimeout("showMessage('Single click complete')", 500);
}

function startDblClick(CancelSingle)
{
  showMessage("Double click received");
  if (CancelSingle && iTimeoutId)
  {
    window.clearTimeout(iTimeoutId);
    showMessage("Single click cancelled");  
  }
  else
  {
    showMessage("Single click allowed");  
  }
  showMessage("Double click complete");
}

function showMessage(Text)
{
  var oOutput = document.getElementById("txtOutput");
  oOutput.value += (Text + "\n");
}

</script>
</head>
<body>
<div onclick="startSingleClick();" ondblclick="startDblClick(chkCancelSingle.checked);">
Make Single or Double Click
</div>
<input type="checkbox" id="chkCancelSingle">Cancel Single Click
<br>
<textarea id="txtOutput" rows="20" cols="40"></textarea>
</body>
</html>

Thanks and Regards
Ramanan Kalirajan

**chaarmann** · Dec 2 '09, 09:04 AM

From my experience it seems that the browser does not act immediately on a single click, it waits some milliseconds to see if a second click follows, so that it knows whether to call a single-click action or a double-click action. Just make a simple button and assign a small action like adding "Hello" to a text field. If you try to click it repeatedly with the mouse very fast, the text appears with a lower speed. You need to type in a special rhythm to get the fastest text-appending. Sometimes this is annoying: if I checkmark google-emails for deletion too fast, some boxes are not marked at all although I clicked on them. And some web-calculators "loose" numbers the same way.

So if you want to implement delayed action, you can just use the onClick and onDblClick, there is no problem with overlapping.
If you want to implement fast action, you should assign both onClick and onDblClick to the same action (this would solve my email problem)
And if you want to implement immediate action, use onMouseDown. (But check that mouse was up when entering the box before)

**Dormilich** · Dec 2 '09, 11:37 AM

and to get away from inline JavaScript you could also do

Code:

var div = document.getElementById(…);
div.addEventListener("click", startSingleClick, false);
div.addEventListener("dblclick", startDblClick, false); // function needs some small changes, tho

Is it possible to call both events onclick,ondblclick in div tag?

Is it possible to call both events onclick,ondblclick in div tag?

Comment

Comment

Comment