Cần hủy các sự kiện click/mouseup khi nhấp đúp vào sự kiện được phát hiện

Question

Điều này được thực hiện như thế nào?

Answer 1

Đây là một câu hỏi hay và tôi thực sự không nghĩ rằng nó có thể được thực hiện dễ dàng. (Some discussion on this)

Nếu nó là siêu Duper quan trọng để bạn có thể có chức năng này, bạn có thể hack nó như vậy:

function singleClick(e) { 
    // do something, "this" will be the DOM element 
} 

function doubleClick(e) { 
    // do something, "this" will be the DOM element 
} 

$(selector).click(function(e) { 
    var that = this; 
    setTimeout(function() { 
     var dblclick = parseInt($(that).data('double'), 10); 
     if (dblclick > 0) { 
      $(that).data('double', dblclick-1); 
     } else { 
      singleClick.call(that, e); 
     } 
    }, 300); 
}).dblclick(function(e) { 
    $(this).data('double', 2); 
    doubleClick.call(this, e); 
}); 

Và đây là một example of it at work.

Như đã nêu trong phần bình luận, có một plugin cho điều này làm những gì tôi đã làm ở trên khá nhiều, nhưng gói nó lên cho bạn để bạn không phải nhìn thấy xấu xí: FixClick.

Answer 2

Kỹ thuật được nêu trong các câu trả lời khác được gọi là debouncing.

Answer 3

Raymond Chen đã thảo luận một số trong số implications of single-versus-double clicking - mặc dù anh ấy đang nói trong ngữ cảnh của Windows, những gì anh ấy nói có liên quan đến thiết kế giao diện người dùng dựa trên trình duyệt.

Về cơ bản, hành động được thực hiện trên nhấp đúp phải là điều hợp lý cần làm sau một lần nhấp. Ví dụ: trong giao diện người dùng trên máy tính để bàn, nhấp chuột duy nhất chọn mục và nhấp đúp sẽ mở mục đó (ví dụ: mở tệp hoặc khởi chạy ứng dụng). Người dùng sẽ phải chọn tệp để mở tệp đó, vì vậy, việc thực hiện hành động nhấp chuột duy nhất được thực hiện trước hành động nhấp đúp là không quan trọng.

Nếu bạn có thành phần giao diện người dùng có hành động nhấp đúp hoàn toàn không liên quan đến hành động nhấp chuột duy nhất, điều đó trở nên cần thiết để ngăn hành động nhấp chuột duy nhất xảy ra khi hệ thống nhận ra nó thực sự là một nhấp đúp, thì bạn thực sự nên suy nghĩ lại về thiết kế của bạn. Người dùng sẽ thấy nó khó xử và phản trực giác, ở chỗ nó sẽ không hành động theo cách mà họ quen với việc diễn xuất.

Nếu bạn vẫn muốn theo cách đó, bạn sẽ phải sử dụng kỹ thuật debouncing (trong trường hợp tất cả các thao tác nhấp chuột sẽ bị trì hoãn) hoặc thực hiện một số cơ chế khác theo đó trình xử lý nhấp đúp hoàn tác công việc được thực hiện bởi trình xử lý nhấp chuột duy nhất.

Bạn cũng nên lưu ý rằng một số người dùng đặt thời gian nhấp đúp dài. Ví dụ, một số người có thể có thời gian nhấp đúp nhiều hơn một tập thứ hai trong tùy chọn hệ thống của họ, vì vậy kỹ thuật debouncing dựa trên khoảng thời gian tùy ý mà bạn chọn sẽ làm cho thành phần UI của bạn không thể truy cập được với những người đó nếu thực hiện thao tác nhấp đơn lẻ sẽ loại trừ hành động nhấp đúp. Kỹ thuật "hoàn tác những gì vừa xảy ra trên một cú nhấp chuột" là giải pháp khả thi duy nhất cho điều này, theo như tôi biết.

Answer 4

jQuery Sparkle cung cấp giải pháp thanh lịch gọn gàng cho việc này, bằng cách triển khai sự kiện tùy chỉnh trên một trình duyệt. Bằng cách này, bạn có thể sử dụng nó giống như bất kỳ sự kiện khác, vì vậy:

$('#el').singleclick(function(){}); 
// or event 
$('#el').bind('singleclick', function(){}); 

Nó cũng cung cấp các sự kiện tùy chỉnh cho các nhấp chuột cuối cùng và lần đầu tiên trong một loạt các cú nhấp chuột. Và sự kiện tùy chỉnh lastclick thực sự vượt qua số lần nhấp chuột trở lại! Vì vậy, bạn có thể làm điều này!

$('#el').lastclick(function(event,clicks){ 
    if (clicks === 3) alert('Tripple Click!'); 
}); 

Bạn có thể tìm mã nguồn để xác định sự kiện tùy chỉnh here.

Đó là mã nguồn mở theo giấy phép AGPL, vì vậy bạn có thể thoải mái lấy những gì bạn cần mà không cần lo lắng!:-) Nó cũng tích cực phát triển trên cơ sở hàng ngày, do đó bạn sẽ không bao giờ được ngắn về hỗ trợ.

Nhưng quan trọng nhất là khung Plugin/hiệu ứng DRY để cho phép bạn phát triển plugin và tiện ích mở rộng dễ dàng hơn nhiều. Vì vậy, hy vọng điều này sẽ giúp đạt được mục tiêu đó!

Answer 5

Nếu đây là một nút gửi biểu mẫu (không nhất thiết là trường hợp cho áp phích gốc, nhưng có thể là trường hợp cho những người khác đến đây qua Google), một tùy chọn dễ dàng hơn là vô hiệu hóa phần tử được nhấp vào trong trình xử lý sự kiện nhấp chuột của bạn:

$(selector).click(function(e) { 
    $(this).prop('disable', true); 
}