setting both onclick and ondblclick event handlers

oranginalab · November 25th, 2004, 02:49 PM

Hi friends,

Is there any way to set both onClick and onDblClick event handlers on an image element so that when the user clicks on it an action is triggered and when she doubleclick the same image a different javascript action is taken.

I've tried something like:

<img src="images/mypic.jpg" border="0" onClick="javascript:alert('click');" onDblClick="javascript:alert('doubleclick');">

but it didn't work.

The browser always catch de onClick event, no matters if it is actually a click event or just the first click of a doubleclick event.

Any ideas on how to solve it?
Any help will be appreciate

Thank you

TomÃ s JimÃ©nez
OranginaLab

joefawcett · November 25th, 2004, 03:12 PM

Try this:

Code:

<html>
<head>
<title></title>
<script type="text/javascript">

function showEvent()
{
  var oOutput = document.getElementById("txtOutput");
  oOutput.value += event.type + "\n";
}

</script>
</head>
<body>
<img src="images/beer.gif" onmousedown="showEvent();" onmouseup="showEvent();" onclick="showEvent();" ondblclick="showEvent();">
<textarea id="txtOutput" rows="20" cols="40"></textarea>

</body>
</html>

The reason your code fails is because after the first click you show a modal alert box which blocks further input so the double click is not activated. In my example writing to the textarea is not modal.

--

Joe (Microsoft MVP - XML)

oranginalab · November 25th, 2004, 03:26 PM

Thank you for your answer, Joe!
You are right and your example runs fine.

But what I need now is to run different JS actions depending on the event trapped.
I need to take an action for onclick events and a different one for onDblClick.

Do you know how to do it?

Thank you very much

TomÃ s

TomÃ s JimÃ©nez
OranginaLab

joefawcett · November 25th, 2004, 03:50 PM

Code:

<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>
<img src="images/beer.gif" onclick="startSingleClick();" ondblclick="startDblClick(chkCancelSingle.checked);">
&nbsp;
<input type="checkbox" id="chkCancelSingle">Cancel Single Click
<br>
<textarea id="txtOutput" rows="20" cols="40"></textarea>
</body>
</html>

--

Joe (Microsoft MVP - XML)