【问题标题】:How to make double click & single click event for link button of Asp.net control?如何为 Asp.net 控件的链接按钮制作双击和单击事件?
【发布时间】:2012-02-02 01:44:52
【问题描述】:

考虑以下几点:

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

如何在单击链接按钮时双击而不是单击?

已编辑

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

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

谢谢

【问题讨论】:

标签: c# javascript asp.net


【解决方案1】:

你必须做这样的事情。

代码隐藏。

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

然后在您的 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); 
    }
}

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

我的方法的问题在于,用户在执行单击操作之前总是必须等待整个回调时间。只要您使用单击/双击来区分用户想要什么,我就看不到任何解决方法。如果您发现此延迟问题太大,您可以随时尝试单击/shift+click 之类的操作来交替操作。这样可能不会那么直观,但您会立即知道用户想要什么,并且可以立即做出响应,而不是等着看用户是否再次点击。

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

【讨论】:

    【解决方案2】:

    简短回答:不,你不能那样做。

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

    根据quirksmode.org,双击的事件顺序如下:

    1. 鼠标按下
    2. 鼠标移动
    3. 点击
    4. 鼠标按下
    5. 鼠标移动
    6. 点击
    7. dblclick

    即使这个顺序在浏览器之间也不一致。没有简单可靠的方法来检测对同一元素的单击和双击。

    引用quirksmode.org:

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

    根据jQuery

    不建议将处理程序同时绑定到 click 和 dblclick 相同元素的事件。触发的事件顺序各不相同 从浏览器到浏览器,其中一些之前接收到两个点击事件 dblclick 和其他只有一个。双击灵敏度(最大 被检测为双击的两次点击之间的时间)可能会有所不同 操作系统和浏览器,并且通常是用户可配置的。

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

    【讨论】:

    • 重要的不仅仅是事件,你还需要放置,所有这些必须完成的时间限制,以及这两次点击之间的像素距离。
    • @Aristos:没错。 jQuery 引用很好地总结了为什么时间限制可能不起作用。感谢您提出其中的距离部分。
    【解决方案3】:

    尝试使用ondblclick 而不是onclick

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

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

    【讨论】:

    • 不,它不工作.. 我试过 btn.Attributes.Add("ondblclick", "return Test();");
    • 你能澄清一下吗?它是不是因为它在第一次点击时触发而不起作用?
    • 不,我无法执行我可以通过 onclick 执行的任何操作
    • @user1025901:刚刚测试,问题是第一次点击会导致导航发生,所以需要拦截onclick并返回false。用此信息更新了答案。
    • 是的,它确实有效..但不理解逻辑以及函数名前的@是什么?另外,如果我需要单击一下就不会发生这种情况?
    【解决方案4】:

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

    【讨论】:

      【解决方案5】:

      尝试获取点击次数并尝试执行操作。我认为ondbclick可以通过javascript实现。

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

      编辑: 主管技术说的对,你可以执行那个逻辑

      【讨论】:

      • 没办法,如果现在点击,20秒后点击呢?这是双击吗?
      【解决方案6】:

      将此代码粘贴到 Page_Load 中即可使用

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

      【讨论】:

      • 这种方法会破坏单击执行某些操作而双击执行其他操作的目的
      【解决方案7】:

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

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

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

      【讨论】:

        【解决方案8】:

        您可以使用此处给出的 Jquery 事件 Make a link open on double click 文档可以在这里找到 http://api.jquery.com/dblclick/

        【讨论】:

          【解决方案9】:

          在测试您上面的示例时,我发现每次单击LinkButton 时都会提交包含GridView 的表单。为了解决这个问题,我使用了以下代码。

          以下脚本将在用户每次点击链接时计数。

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

          我们取消表单提交,以便我们可以跟踪用户点击链接的次数。这可能会导致您的页面出现问题,但似乎是无法跟踪双击的原因。

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

          我在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>    
          

          在页面后面的代码中,我们添加了用于单击的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);    
          }    
          

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

          【讨论】:

            猜你喜欢
            • 2011-11-08
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2017-10-25
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多