如何双击&单击事件为Asp.net控件的链接按钮?

时间:2012-01-04 04:42:59

标签: c# javascript asp.net

请考虑以下事项:

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 *提供的解决方案,但问题是在这种情况下它会拦截单击。

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

由于

9 个答案:

答案 0 :(得分:13)

你必须做这样的事情。

代码背后。

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

我的方法的问题是用户在执行单击操作之前总是必须等待整个回调时间。只要您使用单击/双击来区分用户想要的内容,我就没有看到任何解决方法。如果您发现此延迟太大而无法解决问题,您可以尝试点击/移动+点击以在操作之间切换。它可能不会那么直观,但你会立即知道用户想要什么,并且可以立即响应而不是等待用户再次点击。

如果您有任何问题,请与我们联系。

答案 1 :(得分:8)

简短回答:不,你做不到。

答案很长:你不能这样做,因为双击实际上是2次点击。有很多黑客(比如基于计时器的方法)可以找到哪些尝试做到这一点,但如果你选择它们,请注意这总是一个不可靠和冒险的行为。

根据quirksmode.org,这是双击的事件序列:

  1. mousedown
  2. 鼠标松开
  3. 点击
  4. 鼠标按下
  5. 鼠标松开
  6. 点击
  7. DBLCLICK
  8. 即使这个顺序在浏览器中也不一致。没有可靠的方法来检测同一元素的点击和双击。

    引用quirksmode.org

      

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

    根据jQuery

      

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

    您最好的选择是重新设计工作流程,以便您可以依赖其他内容(而不是点击次数)。

答案 2 :(得分:4)

尝试使用ondblclick代替onclick

为了使其正常工作,您还必须拦截onclick并返回false,以便不进行自动导航:

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

答案 3 :(得分: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();
}

答案 4 :(得分:0)

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

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

编辑: powers_tech所说的是对的。你可以执行那个逻辑

答案 5 :(得分:0)

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

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

答案 6 :(得分:0)

我在这里放置了示例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");



    }

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

答案 7 :(得分:0)

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

答案 8 :(得分:0)

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

每次用户点击链接时,都会计算以下脚本。

<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代码。请注意:Cell引用设置为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);    
}    

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

相关问题