Detect dblClick

set timer-raise appropriate event

[srivalli9]

Hi,

I'm a newbie to javascript.
I would really appreciate if someone can post some sample code to DETECT A DOUBLE CLICK EVENT.

I have a <tr> element that has to capture both single click and double click events on it and submit the form to the server with different inputs.

The problem is that when the user tries to double click, the code detects a single click and submits the form and a new page is displayed.
So, there is no way that the user can double click on it.

I would therefore appreciate if some one can post some code that sets the timer to detect the double click and "raise" the appropriate event!

Thanks in advance.

-Srivalli.

[Bernard Marx]

Something along these lines?

<script>
var cancelClick;
function elmClick()
{
  cancelClick = false;
  setTimeout("execClick()",500)
}
function execClick()
{
  if(!cancelClick)
    alert("click executed")
}
function elmDblClick()
{
  cancelClick = true;
  alert("double click executed")
}
</script>
<span style="cursor:pointer;cursor:hand;"
   onclick="elmClick()"
   ondblclick="elmDblClick()">
try me</span>

[srivalli9]

Bernard Marx,

Thanks a lot for posting the code.
Its perfect.

I want to extend it to let the function "execClick()" return a value to the CALLER of "elmClick()"

i.e., I want to do some thing like this....

<script>

var cancelClick;

function elmClick() {
cancelClick = false;
setTimeout("if(execClick()){return true;}else{return false}",500)
}

function execClick() {
if(!cancelClick)
{
alert("click executed");
return true;
}
else
{
return false;
}
}

function elmDblClick() {
cancelClick = true;
alert("double click executed")
}

</script>

<span style="cursor:pointer;cursor:hand;" onclick="if( elmClick() ){ alert('elmClick returned true') }"
ondblclick="elmDblClick()"> try me</span>
-----------------

But the function elmClick doesn't seem to return true/false to the caller, i.e., alert('elmClick returned true') is never being executed

If it is not asking for too much, can you please tell me how I can return the value?

Thanks,
Srivalli

[Bernard Marx]

It's not possible to return a value like that because the setTimeout starts a new thread.

It is, however, definitely possible to do whatever it is you want to do, but via a slightly different route. Can you be more specific about your goal.

[srivalli9]

Thanks for extending your help.

I'm writing an .aspx page.
The functionality I want to implement is is as follows...
1. When the user "Clicks" on a table row, I have to POSTBACK the Page (POSTBACK means submitting the form)
with some input.
1. When the user "Double Clicks" on a table row, I have to POSTBACK the Page with some other input.

I have to write all this in the CodeBehind file (.aspx.cs)

That is,
On click, do this...
On Dbl Click do something else....

If you are familiar with .NET, the following lines will clarify my intention...
row.Attributes.Add("onDblClick","javascript:if(elmDblClick()){" + webControl.Page.GetPostBackEventReference(webControl,"DblClick")}");

row.Attributes.Add("onclick","javascript:if(elmClick()){" + webControl.Page.GetPostBackEventReference(webControl,"Click")}");

Please let me know if that make any sense.

Thanks,
Srivalli.

[Bernard Marx]

I have only experimented with C#, and certainly not with any server-side .net , so I'm a bit lost there (How does one 'post back the page', for instance?)

No matter.

I quick restructure of the code should sort things out.
At the moment, you are putting quite a bit of logic into each event handler. This is inefficient (in terms of server processing and download time), and shouldn't be necessary.

In a 'normal' client-side scenario, you would put the "if..else" logic into the function that's being executed - here, that means the function, execClick. That should solve the problem. Trouble is, you may need to hold a reference to the clicked object. This is relatively easy to do, but I'm in the dark as to what's possible, since a fair amount is hidden inside the net framework.

[srivalli9]

Bernard Marx

Thanks for all the information.
I could get it solved by attaching a custom event to the table row, which gets executed ONLY if it were really a "single click", but NOT the first click of a "double click" event.

Thanks again,
Srivalli.