2012-01-04 26 views
12

xem xét như sau:Làm thế nào để thực hiện nhấp đúp và sự kiện nhấp chuột duy nhất cho nút liên kết của điều khiển 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();"); 
    } 
} 

Thay vì một nhấp chuột duy nhất, làm thế nào tôi có thể làm cho nó nhấn đúp chuột khi nhấn vào nút liên kết?

Edited

Tôi đã thử với các giải pháp được trình bày bởi * competent_tech * nhưng vấn đề là trong trường hợp đó nó sẽ chặn các nhấp chuột duy nhất.

Tôi cần thực hiện một số thao tác trên một lần nhấp và một thứ khác trên nhấp đúp. Làm ơn giúp tôi.

Cảm ơn

+1

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

Trả lời

13

Bạn sẽ phải làm điều gì đó như điều này.

Mã phía sau.

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

sau đó trong javascript của bạn, bạn sẽ cần phải xác định các chức năng OnClick như thế này

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

Bạn có thể đặt javascript trực tiếp vào tập tin aspx của bạn hoặc thêm nó tự động khi bạn thêm các LinkButton đến trang. Nếu bạn cần thực hiện một số hành động ở phía máy chủ khi người dùng nhấp chuột duy nhất hoặc nhấp đúp chuột, bạn có thể sử dụng phương thức __doPostBack. Xem here để biết thêm thông tin về điều đó.

Sự cố với cách tiếp cận của tôi là người dùng sẽ luôn phải đợi toàn bộ thời gian gọi lại trước khi thực hiện thao tác nhấp chuột duy nhất. Tôi không thấy bất kỳ cách nào xung quanh điều này miễn là bạn đang sử dụng nhấp chuột duy nhất/nhấp đúp để phân biệt những gì người dùng muốn. Nếu bạn thấy sự chậm trễ này là quá lớn của một vấn đề bạn luôn có thể thử một cái gì đó như click/shift + click để thay thế giữa các hành động. Nó có thể sẽ không được trực quan theo cách đó nhưng bạn sẽ ngay lập tức biết những gì người dùng muốn và có thể trả lời ngay lập tức thay vì chờ đợi để xem liệu người dùng có nhấp chuột lần thứ hai hay không.

Hãy cho tôi biết nếu bạn có bất kỳ câu hỏi nào.

4

Hãy thử sử dụng ondblclick thay vì onclick.

Để thực hiện công việc này một cách chính xác, bạn cũng phải chặn onclick và trả về false để điều hướng tự động không diễn ra:

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

không có nó không được làm việc .. tôi đã cố gắng btn.Attributes.Add ("ondblclick", "trở lại Kiểm tra();"); – user1025901

+0

Bạn có thể làm rõ một chút không? Có phải nó không hoạt động vì nó kích hoạt trên lần nhấp đầu tiên hay không? –

+0

Không, tôi không thể thực hiện bất kỳ hành động nào mà tôi có thể thực hiện với onclick – user1025901

0

Hãy thử để có được đếm nhấp chuột và cố gắng thực hiện một hoạt động tôi nghĩ rằng ondbclick có thể được thực hiện thông qua javascript.

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

EDIT: gì competent_tech nói là right.you có thể thực hiện rằng logic

+0

không có cách nào, điều gì sẽ xảy ra nếu nhấp chuột ngay bây giờ và sau 20 giây? là nhấp đúp này? – Aristos

0

Dán mã này trong Page_Load nó sẽ làm việc

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

+0

Cách tiếp cận này sẽ đánh bại mục đích thực hiện một số hành động trên một cú nhấp chuột và một cái gì đó khác trên nhấp đúp chuột – user1025901

8

Câu trả lời ngắn gọn: Không, bạn không thể làm điều đó.

Câu trả lời dài: Bạn không thể làm điều đó vì nhấp đúp có hiệu quả là 2 lần nhấp chuột. Có rất nhiều hacks (như phương pháp tiếp cận dựa trên bộ đếm thời gian) mà bạn có thể tìm thấy những cố gắng để làm điều này, nhưng nếu bạn chọn chúng, hãy lưu ý rằng điều này luôn luôn là một hành vi không đáng tin cậy và nguy hiểm.

Theo quirksmode.org, đây là chuỗi các sự kiện cho một nhấp chuột kép:

  1. mousedown
  2. mouseup
  3. nhấp chuột
  4. mousedown
  5. mouseup
  6. nhấp chuột
  7. dblclick

Ngay cả thứ tự này không nhất quán giữa các trình duyệt. Có cách đơn giản không đáng tin cậy để phát hiện cả nhấp chuột và nhấp đúp vào cùng một phần tử.

Trích dẫn quirksmode.org:

Đừng đăng ký bấm và dblclick sự kiện trên cùng một nguyên tố: đó là không thể phân biệt nhấp chuột duy nhất các sự kiện từ các sự kiện nhấp chuột mà dẫn đến một sự kiện dblclick.

Và mỗi jQuery:

Nó là không lưu ý để ràng buộc xử lý để cả nhấp chuột và dblclick sự kiện cho các phần tử giống nhau. Chuỗi sự kiện được kích hoạt khác nhau từ trình duyệt đến trình duyệt, với một số sự kiện nhận được hai nhấp chuột trước chỉ số dblclick và các sự kiện khác chỉ có một. Độ nhạy nhấp đúp (tối đa thời gian giữa các lần nhấp được phát hiện dưới dạng nhấp đúp) có thể thay đổi theo hệ điều hành và trình duyệt và thường có thể định cấu hình người dùng.

Đặt cược tốt nhất của bạn là thiết kế lại quy trình làm việc để bạn sử dụng thứ gì đó khác (thay vì số nhấp chuột) để dựa vào.

+0

Không chỉ các sự kiện đếm, bạn cũng cần phải đặt vào, thời hạn mà tất cả điều này phải được thực hiện, và khoảng cách điểm ảnh giữa hai lần nhấp này. – Aristos

+0

@Aristos: Chính xác. Trích dẫn jQuery tóm tắt độc đáo tại sao giới hạn thời gian có thể không hoạt động. Cảm ơn vì đã đưa ra phần khoảng cách của nó. – Mrchief

0

Tôi đã đặt mã javascript mẫu ở đây.

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



    } 

Bằng việc giới thiệu nút thứ hai với cùng một giá trị, giải pháp là ổn định, nhưng yêu cầu thêm một số mã hóa.

0

Trong thử nghiệm ví dụ của bạn ở trên, tôi thấy rằng hình thức các GridView được chứa trong được gửi mỗi khi bạn nhấp vào LinkButton . Để giải quyết vấn đề này, tôi đã sử dụng đoạn mã sau.

Tập lệnh sau sẽ được tính mỗi khi người dùng nhấp vào liên kết.

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

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

Chúng tôi hủy gửi biểu mẫu để chúng tôi có thể theo dõi số lần người dùng nhấp vào liên kết. Điều này có thể gây ra sự cố với trang của bạn, nhưng dường như là lý do tại sao các nhấp chuột kép không thể được theo dõi.

Tôi đã tạo trường mẫu trong điều khiển GridView để hiển thị cả nút nhấp chuột và nhấp đúp.

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

Trong đoạn mã đằng sau trang chúng tôi thêm mã javascript cho một nhấp chuột duy nhất và javascript mã cho nhấp đúp. Xin lưu ý: tham chiếu Cell được đặt thành 2 trong khi trong ví dụ của bạn là 4, do các cột bị giới hạn mà tôi đã sử dụng trong thử nghiệm của mình.

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

Điều này sẽ cho phép bạn nắm bắt nhấp đúp vào một số liên kết và nhấp chuột duy nhất trên một số liên kết khác. Tuy nhiên, như đã đề cập ở trên, việc gửi biểu mẫu hiện đã bị hủy và bạn sẽ cần phải tìm một phương pháp khác để gửi dữ liệu của mình nếu bạn sử dụng mã ở trên.

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(); 
} 
Các vấn đề liên quan