2012-01-04 21 views
12

considerar lo siguiente:¿Cómo hacer doble clic y evento de un solo clic para el botón de enlace del control de 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();"); 
    } 
} 

En lugar de un solo clic, ¿cómo puedo hacer que haga doble clic mientras hace clic en el botón de enlace?

Editado

he tratado con la solución presentada por competent_tech * * pero el problema es que en ese caso se interceptará el único clic.

Necesito hacer alguna operación con un solo clic y otra cosa con doble clic. Por favor, ayúdame.

Gracias

+1

http://www.codeproject.com/KB/webforms/DoubleClickGridviewRow.aspx – Neha

Respuesta

13

Habría que hacer algo como esta.

Código detrás.

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

entonces en su javascript tendrá que definir la función OnClick como esto

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

Usted puede poner el código JavaScript directamente en su archivo .aspx o añadir de forma dinámica cuando se agrega el LinkButton a la página. Si necesita realizar alguna acción en el lado del servidor cuando el usuario hace un solo clic o hace doble clic, puede usar el método __doPostBack. Vea here para más información sobre eso.

El problema con mi enfoque es que el usuario siempre tendrá que esperar todo el tiempo de devolución de llamada antes de realizar su acción de un solo clic. No veo ninguna forma de evitar esto, siempre y cuando esté usando un solo clic/doble clic para distinguir lo que el usuario quiere. Si considera que esta demora es un problema demasiado grande, siempre puede intentar algo como hacer clic/shift + clic para alternar entre las acciones. Probablemente no sería tan intuitivo de esa manera, pero usted sabría inmediatamente lo que el usuario quiere y podría responder de inmediato en lugar de esperar para ver si el usuario hace clic una segunda vez.

Avíseme si tiene alguna pregunta.

4

Intente utilizar ondblclick en lugar de onclick.

Para que esto funcione correctamente, también hay que interceptar onclick y devolver false para que la navegación automática no tiene lugar:

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

no, no está funcionando .. He intentado btn.Attributes.Add ("ondblclick", "retorno Prueba();"); – user1025901

+0

¿Puedes aclarar un poco? ¿No está funcionando porque se dispara en el primer clic o? –

+0

No, no puedo realizar ninguna acción que haya podido hacer con onclick – user1025901

0

tratar de obtener el recuento del clic y tratar de realizar una operación .piénsalo que puede implementarse a través de javascript.

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

EDIT: Lo que dijo es competent_tech right.you puede realizar esa lógica

+0

de ninguna manera, ¿qué pasa si hace clic ahora y uno después de 20 segundos? es este doble clic? – Aristos

0

pega este código en Page_Load que funcionará

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

+0

Este enfoque frustrará el propósito de realizar alguna acción con un solo clic y otra cosa al hacer doble clic – user1025901

8

Respuesta corta: No, no puedes hacer eso.

Respuesta larga: No se puede hacer eso porque un doble clic es efectivamente 2 clics individuales. Hay muchos hacks (como los enfoques basados ​​en temporizador) que puede encontrar que intentan hacer esto, pero si los elige, tenga en cuenta que esto siempre va a ser un comportamiento no confiable y arriesgado.

Según quirksmode.org, aquí está la secuencia de eventos para un doble clic:

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

Incluso este orden no es coherente entre los navegadores. No existe una forma sencilla y confiable de detectar tanto el clic como el doble clic en el mismo elemento.

Citando quirksmode.org:

no se registre y haga clic en DBLCLICK eventos en el mismo elemento: es imposible distinguir un solo clic en eventos de eventos de clic que plomo a un evento dblclick.

Y por jQuery:

No es aconsejable para unirse a los manipuladores tanto el clic y DBLCLICK eventos para el mismo elemento. La secuencia de eventos desencadenados varía de del navegador al navegador, y algunos reciben dos eventos de clic antes del dblclick y otros solo uno. La sensibilidad de doble clic (máximo entre clics que se detecta con un doble clic) puede variar según el sistema operativo y el navegador, y a menudo es configurable por el usuario.

Su mejor opción es rediseñar el flujo de trabajo para que pueda utilizar otra cosa (en lugar de la cantidad de clics) en la que puede confiar.

+0

No solo son los eventos que cuentan, también debe colocarlos, el límite de tiempo que todo esto debe hacerse y las distancias de píxeles entre estos dos clics. – Aristos

+0

@Aristos: Exactamente. La cita de jQuery resume muy bien por qué el límite de tiempo puede no funcionar. Gracias por traer la parte de la distancia. – Mrchief

0

He puesto aquí el código de ejemplo de 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"); 



    } 

Al introducir segundo botón con el mismo valor, la solución es estable, pero requiere algo de código adicional.

0

En las pruebas de su ejemplo anterior, he encontrado que la forma del GridView está contenida en obtiene presentado cada vez que haga clic en el LinkButton . Para solucionar este problema, he usado el siguiente código.

La siguiente secuencia de comandos contará cada vez que el usuario haga clic en el enlace.

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

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

cancelamos el envío del formulario para que podamos realizar un seguimiento del número de veces que el usuario hace clic en el enlace. Esto puede causar problemas con su página, pero parece ser la razón por la cual no se puede hacer un seguimiento de los clics dobles.

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

he creado un campo de la plantilla en un control GridView para mostrar tanto la única doble clic para botones de clic y.

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

En el código detrás de la página que agregue el código javascript para un solo clic y el código javascript para un doble clic. Tenga en cuenta: la referencia de celda se establece en 2, mientras que en su ejemplo fue de 4, debido a las columnas limitadas que utilicé en mi prueba.

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

Esto debería permitirle capturar clics dobles en algunos enlaces y un solo clic en otros. Sin embargo, como se mencionó anteriormente, el envío del formulario ahora está cancelado y deberá buscar otro método para enviar sus datos si va a utilizar el código anterior.

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