Jquery liên kết nhấp đúp và nhấp một lần riêng biệt

Có điều gì đó trong jquery cho phép tôi phân biệt giữa hành vi khi nhấp đúp và nhấp một lần không?

Khi tôi liên kết cả hai vào cùng một phần tử, chỉ một nhấp chuột duy nhất được thực thi.

Có cách nào đợi một khoảng thời gian trước khi thực hiện một cú nhấp chuột để xem liệu người dùng có nhấp lại hay không?

Cảm ơn :)

Tôi thấy rằng câu trả lời của John Strickler không hoàn toàn làm được những gì tôi mong đợi. Khi cảnh báo được kích hoạt bằng một lần nhấp thứ hai trong cửa sổ hai giây, mỗi lần nhấp tiếp theo sẽ kích hoạt một cảnh báo khác cho đến khi bạn đợi hai giây trước khi nhấp lại. Vì vậy, với mã của John, một cú nhấp ba lần hoạt động như hai lần nhấp đúp trong đó tôi mong đợi nó hoạt động giống như một cú nhấp đúp sau đó là một lần nhấp.

Tôi đã làm lại giải pháp của anh ấy để hoạt động theo cách này và trôi chảy theo cách mà tâm trí tôi có thể hiểu rõ hơn. Tôi đã giảm độ trễ từ 2000 xuống 700 để mô phỏng tốt hơn những gì tôi sẽ cảm thấy là độ nhạy bình thường. Đây là fiddle: http://jsfiddle.net/KpCwN/4/ .

Cảm ơn vì nền tảng, John. Tôi hy vọng phiên bản thay thế này hữu ích cho những người khác.

var DELAY = 700, clicks = 0, timer = null;

$(function(){

    $("a").on("click", function(e){

        clicks++;  //count clicks

        if(clicks === 1) {

            timer = setTimeout(function() {

                alert("Single Click");  //perform single-click action    
                clicks = 0;             //after action performed, reset counter

            }, DELAY);

        } else {

            clearTimeout(timer);    //prevent single-click action
            alert("Double Click");  //perform double-click action
            clicks = 0;             //after action performed, reset counter
        }

    })
    .on("dblclick", function(e){
        e.preventDefault();  //cancel system double-click event
    });

});

Giải pháp được đưa ra từ "Nott Response" dường như kích hoạt cả hai sự kiện, nhấp chuột và dblclick khi nhấp đúp. Tuy nhiên, tôi nghĩ rằng nó đã đi đúng hướng.

Tôi đã thực hiện một thay đổi nhỏ, đây là kết quả:

$("#clickMe").click(function (e) {
    var $this = $(this);
    if ($this.hasClass('clicked')){
        $this.removeClass('clicked'); 
        alert("Double click");
        //here is your code for double click
    }else{
        $this.addClass('clicked');
        setTimeout(function() { 
            if ($this.hasClass('clicked')){
                $this.removeClass('clicked'); 
                alert("Just one click!");
                //your code for single click              
            }
        }, 500);          
    }
});

Thử nó

http://jsfiddle.net/calterras/xmmo3esg/

Chắc chắn, liên kết hai trình xử lý, một tới clickvà cái kia với dblclick. Tạo một biến tăng sau mỗi lần nhấp. sau đó đặt lại sau một thời gian trễ đã đặt. Bên trong hàm setTimeout, bạn có thể làm gì đó ...

var DELAY = 2000,
    clicks = 0,
    timer = null;

$('a').bind({
    click: function(e) {
        clearTimeout(timer);

        timer = setTimeout(function() {
            clicks = 0;
        }, DELAY);

        if(clicks === 1) {
            alert(clicks);
             //do something here

            clicks = 0;
        }

        //Increment clicks
        clicks++;
    },
    dblclick: function(e) {
        e.preventDefault(); //don't do anything
    }
});

Bạn có thể viết cách triển khai click / dblclick tùy chỉnh của riêng mình để nó đợi thêm một lượt nhấp. Tôi không thấy bất kỳ điều gì trong các hàm jQuery cốt lõi có thể giúp bạn đạt được điều này.

Trích dẫn từ .dblclick () tại trang web jQuery

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

Nhìn vào đoạn mã sau

$("#clickMe").click(function (e) {
    var $this = $(this);
    if ($this.hasClass('clicked')){
        alert("Double click");
        //here is your code for double click
        return;
    }else{
         $this.addClass('clicked');
        //your code for single click
         setTimeout(function() { 
                 $this.removeClass('clicked'); },500);
    }//end of else
});

Demo tại đây http://jsfiddle.net/cB484/

Tôi đã viết một plugin jQuery cho phép cũng ủy quyền các sự kiện nhấp chuột và dblclick

// jQuery plugin to bind both single and double click to objects
// parameter 'delegateSelector' is optional and allow to delegate the events
// parameter 'dblclickWait' is optional default is 300
(function($) {
$.fn.multipleClicks = function(delegateSelector, clickFun, dblclickFun, dblclickWait) {
    var obj;
    if (typeof(delegateSelector)==='function' && typeof(clickFun)==='function') {
        dblclickWait = dblclickFun; dblclickFun = clickFun; clickFun = delegateSelector; delegateSelector = null; // If 'delegateSelector' is missing reorder arguments
    } else if (!(typeof(delegateSelector)==='string' && typeof(clickFun)==='function' && typeof(dblclickFun)==='function')) {
        return false;
    }
    return $(this).each(function() {
        $(this).on('click', delegateSelector, function(event) {
            var self = this;
            clicks = ($(self).data('clicks') || 0)+1;
            $(self).data('clicks', clicks);
            if (clicks == 1) {
                setTimeout(function(){
                    if ($(self).data('clicks') == 1) {
                        clickFun.call(self, event); // Single click action
                    } else {
                        dblclickFun.call(self, event); // Double click action
                    }
                    $(self).data('clicks', 0);
                }, dblclickWait || 300);
            }
        });
    });
};
})(jQuery);

var singleClickTimer = 0; //define a var to hold timer event in parent scope
jqueryElem.click(function(e){ //using jquery click handler
    if (e.detail == 1) { //ensure this is the first click
        singleClickTimer = setTimeout(function(){ //create a timer
            alert('single'); //run your single click code
        },250); //250 or 1/4th second is about right
    }
});

jqueryElem.dblclick(function(e){ //using jquery dblclick handler
    clearTimeout(singleClickTimer); //cancel the single click
    alert('double'); //run your double click code
});

tôi đang triển khai giải pháp đơn giản này, http://jsfiddle.net/533135/VHkLR/5/
mã html

<p>Click on this paragraph.</p>
<b> </b>

mã script

var dbclick=false;    
$("p").click(function(){
setTimeout(function(){
if(dbclick ==false){
$("b").html("clicked")
}

},200)

}).dblclick(function(){
dbclick = true
$("b").html("dbclicked")
setTimeout(function(){
dbclick = false


},300)
});

nó không có nhiều độ trễ

Giải pháp này phù hợp với tôi

var DELAY = 250, clicks = 0, timer = null;

$(".fc-event").click(function(e) {
    if (timer == null) {
        timer = setTimeout(function() {
           clicks = 0;
            timer = null;
            // single click code
        }, DELAY);
    }

    if(clicks === 1) {
         clearTimeout(timer);
         timer = null;
         clicks = -1;
         // double click code
    }
    clicks++;
});

Tôi đã thực hiện một số thay đổi đối với các câu trả lời ở trên tại đây mà vẫn hoạt động tốt: http://jsfiddle.net/arondraper/R8cDR/

(function($){

$.click2 = function (elm, o){
    this.ao = o;
    var DELAY = 700, clicks = 0;
    var timer = null;
    var self = this;

    $(elm).on('click', function(e){
        clicks++;
        if(clicks === 1){
            timer = setTimeout(function(){
                self.ao.click(e);
            }, DELAY);
        } else {
            clearTimeout(timer);
            self.ao.dblclick(e);
        }
    }).on('dblclick', function(e){
        e.preventDefault();
    });

};

$.click2.defaults = { click: function(e){}, dblclick: function(e){} };

$.fn.click2 = function(o){
    o = $.extend({},$.click2.defaults, o);
    this.each(function(){ new $.click2(this, o); });
    return this;
};

})(jQuery);

Và cuối cùng chúng tôi sử dụng như.

$("a").click2({
    click : function(e){
        var cid = $(this).data('cid');
        console.log("Click : "+cid);
    },
    dblclick : function(e){
        var cid = $(this).data('cid');
        console.log("Double Click : "+cid);
    }
});

Giống như câu trả lời trên nhưng cho phép nhấp ba lần. (Trì hoãn 500) http://jsfiddle.net/luenwarneke/rV78Y/1/

    var DELAY = 500,
    clicks = 0,
    timer = null;

$(document).ready(function() {
    $("a")
    .on("click", function(e){
        clicks++;  //count clicks
        timer = setTimeout(function() {
        if(clicks === 1) {
           alert('Single Click'); //perform single-click action
        } else if(clicks === 2) {
           alert('Double Click'); //perform single-click action
        } else if(clicks >= 3) {
           alert('Triple Click'); //perform Triple-click action
        }
         clearTimeout(timer);
         clicks = 0;  //after action performed, reset counter
       }, DELAY);
    })
    .on("dblclick", function(e){
        e.preventDefault();  //cancel system double-click event
    });
});

Đây là phương pháp bạn có thể thực hiện bằng JavaScript cơ bản, phù hợp với tôi:

var v_Result;
function OneClick() {
    v_Result = false;
    window.setTimeout(OneClick_Nei, 500)
    function OneClick_Nei() {
        if (v_Result != false) return;
        alert("single click");
    }
}
function TwoClick() {
    v_Result = true;
    alert("double click");
}

Dưới đây là cách tiếp cận đơn giản của tôi đối với vấn đề này.

Hàm jQuery:

jQuery.fn.trackClicks = function () {
    if ($(this).attr("data-clicks") === undefined) $(this).attr("data-clicks", 0);

    var timer;
    $(this).click(function () {
        $(this).attr("data-clicks", parseInt($(this).attr("data-clicks")) + 1);

        if (timer) clearTimeout(timer);

        var item = $(this);
        timer = setTimeout(function() {
            item.attr("data-clicks", 0);
        }, 1000);
    });
}

Thực hiện:

$(function () {
    $("a").trackClicks();

    $("a").click(function () {
        if ($(this).attr("data-clicks") === "2") {
            // Double clicked
        }
    });
});

Kiểm tra phần tử được nhấp trong Firefox / Chrome để xem các lần nhấp dữ liệu lên xuống khi bạn nhấp, điều chỉnh thời gian (1000) cho phù hợp.