繁体   English   中英

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

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

考虑以下:

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

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

谢谢

你必须做这样的事情。

代码背后。

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方法。 有关详细信息,请参见此处

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

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

简答:不,你做不到。

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

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

  1. 鼠标按下
  2. 鼠标松开
  3. 点击
  4. 鼠标按下
  5. 鼠标松开
  6. 点击
  7. DBLCLICK

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

引用quirksmode.org

不要在同一元素上注册click和dblclick事件:不可能将单击事件与导致dblclick事件的单击事件区分开来。

并根据jQuery

将处理程序绑定到同一元素的click和dblclick事件是不可取的。 触发的事件序列因浏览器而异,有些事件在dblclick之前接收到两个点击事件,而其他事件只接收一个事件。 双击敏感度(双击检测到的点击之间的最长时间)可能因操作系统和浏览器而异,通常可由用户配置。

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

尝试使用ondblclick而不是onclick

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

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

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

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

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

编辑:competent_tech说的是对的。你可以执行这个逻辑

将此代码粘贴到Page_Load中即可

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

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



    }

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

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

在测试上面的示例时,我发现每次单击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代码,双击。 请注意: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);    
}    

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM