Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
|
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old November 25th, 2004, 02:49 PM
Authorized User
 
Join Date: Jun 2003
Posts: 15
Thanks: 0
Thanked 0 Times in 0 Posts
Default setting both onclick and ondblclick event handlers

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
__________________
Tomàs Jiménez
OranginaLab
 
Old November 25th, 2004, 03:12 PM
joefawcett's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

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)
 
Old November 25th, 2004, 03:26 PM
Authorized User
 
Join Date: Jun 2003
Posts: 15
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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
 
Old November 25th, 2004, 03:50 PM
joefawcett's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

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)





Similar Threads
Thread Thread Starter Forum Replies Last Post
Event handlers jwebb Visual Basic 2005 Basics 1 June 25th, 2007 08:44 PM
ie7 keycode, event handlers erobb Javascript 0 November 24th, 2006 01:37 PM
Event handlers does not work after some changes geetageetageeta ASP.NET 2.0 Basics 0 March 6th, 2006 04:19 AM
Conflicting Event Handlers chp Excel VBA 3 February 24th, 2006 03:00 PM
Dynamically change event handlers oranginalab Javascript How-To 2 July 31st, 2003 10:11 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.