javascript 如何为Asp.net控件的链接按钮制作双击和单击事件？

How to make double click & single click event for link button of Asp.net control?

提问by user1025901

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.

我已经尝试过 *competent_tech* 提供的解决方案，但问题是在这种情况下它会拦截单击。

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

我需要在单击时进行一些操作，在双击时进行其他操作。请帮我。

Thanks

谢谢

回答by Mark Rucker

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

然后在您的 javascript 中，您需要像这样定义 OnClick 函数

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 herefor more info on that.

您可以将 javascript 直接放入 .aspx 文件中，也可以在将 LinkBut​​ton 添加到页面时动态添加它。如果您需要在用户单击或双击时在服务器端执行某些操作，您可以使用 __doPostBack 方法。有关更多信息，请参见此处。

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.

如果您有任何问题，请告诉我。

回答by Mrchief

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.

长答案：您不能这样做，因为双击实际上是 2 次单击。有很多技巧（例如基于计时器的方法），您可以找到尝试执行此操作的方法，但是如果您选择它们​​，请注意这始终是不可靠且有风险的行为。

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

根据quirksmode.org，这是双击的事件序列：

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

1. 鼠标按下
2. 鼠标向上
3. 点击
4. 鼠标按下
5. 鼠标向上
6. 点击
7. 双击

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:

引用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.

不要在同一个元素上注册 click 和 dblclick 事件：无法区分单击事件和导致 dblclick 事件的单击事件。

And per jQuery:

并且每个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.

不建议将处理程序绑定到同一元素的 click 和 dblclick 事件。触发事件的顺序因浏览器而异，有些在 dblclick 之前收到两个点击事件，而其他只收到一个。双击灵敏度（被检测为双击的最大点击间隔时间）可能因操作系统和浏览器而异，并且通常是用户可配置的。

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

最好的办法是重新设计工作流程，以便您使用其他东西（而不是点击次数）来依赖。

回答by competent_tech

Try using ondblclickinstead of onclick.

尝试使用ondblclick而不是onclick.

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

为了使其正常工作，您还必须拦截 onclick 并返回 false 以便不会发生自动导航：

        LinkButton1.Attributes.Add("ondblclick", @"alert('test');");
        LinkButton1.Attributes.Add("onclick", @"return false;");

回答by Leon

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

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();
}

回答by prema

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

尝试获取点击次数并尝试执行操作。我认为ondbclick可以通过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

编辑：competent_tech 说的是对的。你可以执行那个逻辑

回答by Vinod

Paste this code in Page_Load it will work

将此代码粘贴到 Page_Load 它将起作用

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

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

回答by Adeel

I have placed the example javascript code here.

我已将示例 javascript 代码放在这里。

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

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:

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.

通过引入具有相同值的第二个按钮，该解决方案是稳定的，但需要一些额外的编码。

回答by Mujtaba Hassan

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

您可以使用此处给出的 Jquery 事件 双击打开链接可以在此处找到文档 http://api.jquery.com/dblclick/

回答by Matthew Dally

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

在测试上面的示例时，我发现GridView每次单击LinkButton. 为了解决这个问题，我使用了以下代码。

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 GridViewcontrol to show both the single click and double click buttons.

我在GridView控件中创建了一个模板字段来显示单击和双击按钮。

<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 javascriptcode for a single click and the javascriptcode 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.

在页面背后的javascript代码中，我们添加了单击javascript代码和双击代码。请注意：由于我在测试中使用的列有限，因此单元格引用设置为 2，而在您的示例中为 4。

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.

这应该允许您捕获某些链接的双击和其他链接的单击。但是，如上所述，表单提交现在已取消，如果您要使用上述代码，则需要找到另一种提交数据的方法。