12

Consider the following:

protected void dgTask_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        LinkButton btn = (LinkButton)e.Row.Cells[4].FindControl("lnkBtnEdit");

        btn.Attributes.Add("onclick", "return Test();");
    }
}

Instead of a single click, how can I make it double click while clicking on the link button?

Edited

I have tried with the solution presented by *competent_tech* but the problem is that in that case it will intercept the single click.

I need to do some operation on single click and something else on double click. Please help me.

Thanks

user1025901
  • 1,849
  • 4
  • 21
  • 28

9 Answers9

13

You'd have to do something like this.

Code behind.

Linkbutton btn;
btn.Attributes.Add("onClick", "OnClick();");

then in your javascript you'll need to define the OnClick function like this

var clickCount = 0;
var timeoutID  = 0;

function OnClick()
{
    clickCount++;

    if (clickCount >= 2) {
       clickCount = 0;          //reset clickCount
       clearTimeout(timeoutID); //stop the single click callback from being called
       DoubleClickFunction();   //perform your double click action
    }
    else if (clickCount == 1) {
       //create a callback that will be called in a few miliseconds
       //the callback time determines how long the user has to click a second time

       var callBack = function(){ 
                         //make sure this wasn't fired at
                         //the same time they double clicked
                         if (clickCount == 1) {      
                            clickCount = 0;         //reset the clickCount
                            SingleClickFunction();  //perform your single click action
                         }
                      };

       //This will call the callBack function in 500 milliseconds (1/2 second).
       //If by that time they haven't clicked the LinkButton again
       //We will perform the single click action. You can adjust the
       //Time here to control how quickly the user has to double click.
       timeoutID = setTimeout(callBack, 500); 
    }
}

You can either put the javascript directly into your .aspx file or add it dynamically when you add the LinkButton to the page. If you need to perform some action on the server side when the user single clicks or double clicks you can use the __doPostBack method. See here for more info on that.

The problem with my approach is that the user will always have to wait the entire callback time before their single click action is performed. I don't see any way around this as long as you are using single click/double click to distinguish what the user wants. If you find this delay to be too big of a problem you could always try something like click/shift+click to alternate between the actions. It probably wouldn't be as intuitive that way but you would immediately know what the user wants and could respond immediately instead of waiting to see if the user clicks a second time.

Let me know if you have any questions.

Community
  • 1
  • 1
Mark Rucker
  • 6,952
  • 4
  • 39
  • 65
8

Short answer: No, you cannot do that.

Long answer: You cannot do that because a double click is effectively 2 single clicks. There are plenty of hacks (such as timer based approaches) that you can find which attempt to do this, but if you choose them, be aware that this is always going to be a non-reliable and risky behavior.

As per quirksmode.org, here's the sequence of events for a double click:

  1. mousedown
  2. mouseup
  3. click
  4. mousedown
  5. mouseup
  6. click
  7. dblclick

Even this order is not consistent amongst browsers. There is simple no reliable way of detecting both click and double click on the same element.

Quoting quirksmode.org:

Don't register click and dblclick events on the same element: it's impossible to distinguish single-click events from click events that lead to a dblclick event.

And per jQuery:

It is inadvisable to bind handlers to both the click and dblclick events for the same element. The sequence of events triggered varies from browser to browser, with some receiving two click events before the dblclick and others only one. Double-click sensitivity (maximum time between clicks that is detected as a double click) can vary by operating system and browser, and is often user-configurable.

Your best bet is to redesign the workflow so that you use something else (rather than number of clicks) to rely on.

Mrchief
  • 75,126
  • 20
  • 142
  • 189
  • Its not only the events thats count, you also need to place on, the time limit that all this must be done, and the pixel distances between this two clicks. – Aristos Jan 19 '12 at 08:48
  • @Aristos: Exactly. The jQuery quote sums up nicely why the time limit may not work. Thanks for bringing out the distance part of it. – Mrchief Jan 19 '12 at 17:20
4

Try using ondblclick instead of onclick.

To make this work correctly, you also have to intercept onclick and return false so that the automatic navigation does not take place:

        LinkButton1.Attributes.Add("ondblclick", @"alert('test');");
        LinkButton1.Attributes.Add("onclick", @"return false;");
competent_tech
  • 44,465
  • 11
  • 90
  • 113
  • no it is not working.. i tried btn.Attributes.Add("ondblclick", "return Test();"); – user1025901 Jan 04 '12 at 04:46
  • Can you clarify a little? Is it not working because it fires on the first click or? – competent_tech Jan 04 '12 at 04:49
  • No i am not able to perform any action which i was able to do with onclick – user1025901 Jan 04 '12 at 04:51
  • @user1025901: Just tested and the issue is that the first click will cause the navigation to occur, so you need to intercept onclick and return false. Updated the answer with this info. – competent_tech Jan 04 '12 at 04:56
  • Yes it does work..but didnot understand the logic and what is the @ before the function name? Also if i need to do something on a single click then that will not happen? – user1025901 Jan 04 '12 at 05:06
  • I tried with tbn.Attributes.Add("ondblclick", "Javascript:__doPostBack('test','" + e.Row.RowIndex + "');"); but no result – user1025901 Jan 04 '12 at 05:07
  • First, the @ is just a way to tell C# to take the string as it is, so that doesn't affect the outcome. The logic is this: the linklabel generates an ` – competent_tech Jan 04 '12 at 05:09
  • @user1025901: your __doPostback is a perfect example of the use of the @; if you look in the generated HTML, your single quotes will be something like &39;. Add an @ before the string and you should get results. – competent_tech Jan 04 '12 at 05:14
  • This approach will defeat the purpose of performing some action on single click and something else on double click – user1025901 Jan 05 '12 at 02:14
  • @user1025901: not at all; you can perform whatever function you like as long as you return false so the default action (navigate to the link) is not invoked. – competent_tech Jan 05 '12 at 02:19
1

http://jsfiddle.net/XfJDK/2/

<div onClick="return OnClick();">click me</div>
<div id="eventText">...</div>

var clicks = 0;

function OnClick() {

    clicks++;
    if (clicks == 1) 
        setTimeout("RunRealCode();", 300); // schedule real code, allowing for 300ms for 2nd optional click

    setTimeout("clicks = 0;", 350); // click timeout of 300 + 50 ms
}

function RunRealCode() {
        if (clicks == 2)
            $("#eventText").text("Double").fadeOut().fadeIn();
        else if (clicks == 1) 
            $("#eventText").text("Single").fadeOut().fadeIn();
}
Leon
  • 3,311
  • 23
  • 20
0

Try to get the count of the click and try to perform an operation.i think ondbclick can be implemented through javascript.

int count = 0;
if(btn.Click == true)
{
  count++;
  if(count == 2)
   {
        // Perform the logic here
   }
}

EDIT: What competent_tech said is right.you can perform that logic

prema
  • 427
  • 4
  • 16
0

Paste this code in Page_Load it will work

LinkButton1.Attributes.Add("ondblclick","yourfunction()"); LinkButton1.Attributes.Add("onclick", @"return false;");

Vinod
  • 4,672
  • 4
  • 19
  • 26
  • This approach will defeat the purpose of performing some action on single click and something else on double click – user1025901 Jan 05 '12 at 02:14
0

I have placed the example javascript code here.

http://jsbin.com/ubimol/2/edit

Html:

  <input id="sin" type="button" value="Edit" onclick="singleClick();return false;"/>
    <input id="dou" style="display:none" type="button" value="Edit" onclick="doubleClick();return false;" />

Javascript:

var isDoubleClick = false;
function singleClick(){
   $("#sin").hide();$("#dou").show();

  //wait for 500 milliseconds.
  setTimeout("waitForSecondClick()", 500);


}


    function waitForSecondClick(){
    if(isDoubleClick == false){
       alert("this is a sinle click event, perform single click functionality");
      }

      isDoubleClick = false; //Reset
      $("#sin").show();$("#dou").hide();
    }

    function doubleClick(){
      isDoubleClick = true;

      alert("this is a double click event, perform double click funcitonality");



    }

By introducing second button with same value, the solution is stable, but require some extra coding.

Adeel
  • 19,075
  • 4
  • 46
  • 60
0

You can use Jquery events as given here Make a link open on double click Documentation can be found here http://api.jquery.com/dblclick/

Community
  • 1
  • 1
Mujtaba Hassan
  • 2,495
  • 2
  • 20
  • 29
0

In testing your example above, I found that the form the GridView is contained in gets submitted every time you click the LinkButton. To work around this I have used the following code.

The following script will count each time the user clicks the link.

<script type="text/javascript">    
    var clickNo = 0;    

    function clickCounter() {    
        clickNo++;    
        if (clickNo == 2) {    
            alert("Double Click");    
            clickNo = 0;    
        }    
    }    
</script>

We cancel the form submission so that we can track the number of times the user clicks the link. This may cause problems with your page, but appears to be the reason why the double clicks cannot be tracked.

<form id="form1" runat="server" onsubmit="return false;">

I created a template field in a GridView control to show both the single click and double click buttons.

<asp:TemplateField HeaderText="Edit">    
    <ItemTemplate>    
        <asp:LinkButton ID="lnkBtnEdit" runat="server">LinkButton</asp:LinkButton>    
        &nbsp;&nbsp;    
        <asp:LinkButton ID="lnkBtnEditDouble" runat="server">LinkButton</asp:LinkButton>    
    </ItemTemplate>    
</asp:TemplateField>

In the code behind the page we add the javascript code for a single click and the javascript code for a double click. Please note: the Cell reference is set to 2 whereas in your example it was 4, due to the limited columns I used in my testing.

try     
{    
    if (e.Row.RowType == DataControlRowType.DataRow)    
    {    
        // Please note: the value in Cells has changed for my testing data.    
        LinkButton btn = (LinkButton)e.Row.Cells[2].FindControl("lnkBtnEdit");    

        btn.Attributes.Add("onclick", "javascript:alert('Single Click');");    

        LinkButton btnDouble = (LinkButton)e.Row.Cells[2].FindControl("lnkBtnEditDouble");    

        btnDouble.Attributes.Add("onclick", "javascript:clickCounter();");    
    }    
}    
catch (Exception ex)    
{    
    Console.WriteLine(ex.Message);    
}

This should allow you to capture double clicks on some links and single clicks on others. However, as mentioned above, the form submission is now cancelled and you will need to find another method to submit your data if you are to use the above code.

Matthew Dally
  • 412
  • 1
  • 6
  • 17