Jquery mengikat klik ganda dan klik tunggal secara terpisah

Apakah ada sesuatu di jquery yang memungkinkan saya untuk membedakan antara perilaku pada klik dua kali dan satu klik?

Ketika saya mengikat keduanya ke elemen yang sama hanya satu klik yang dijalankan.

Adakah cara yang menunggu beberapa saat sebelum eksekusi satu klik untuk melihat apakah pengguna mengklik lagi atau tidak?

Terima kasih :)

Saya menemukan bahwa jawaban John Strickler tidak cukup sesuai dengan yang saya harapkan. Setelah peringatan dipicu oleh klik kedua dalam jendela dua detik, setiap klik berikutnya memicu peringatan lain sampai Anda menunggu dua detik sebelum mengklik lagi. Jadi dengan kode John, klik tiga kali bertindak sebagai dua klik ganda di mana saya mengharapkannya untuk bertindak seperti klik dua kali diikuti dengan satu klik.

Saya telah mengerjakan ulang solusinya agar berfungsi dengan cara ini dan mengalir dengan cara yang dapat dipahami pikiran saya dengan lebih baik. Saya menurunkan penundaan dari 2000 menjadi 700 untuk lebih mensimulasikan apa yang saya rasakan sebagai sensitivitas normal. Ini biolanya: http://jsfiddle.net/KpCwN/4/ .

Terima kasih untuk yayasannya, John. Saya harap versi alternatif ini bermanfaat bagi orang lain.

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

});

Solusi yang diberikan dari "Nott Responding" tampaknya mengaktifkan kedua peristiwa tersebut, klik dan klik kanan saat diklik dua kali. Namun saya pikir itu menunjuk ke arah yang benar.

Saya melakukan perubahan kecil, ini hasilnya:

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

Cobalah

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

Tentu, ikat dua penangan, satu ke clickdan yang lainnya ke dblclick. Buat variabel yang bertambah di setiap klik. lalu setel ulang setelah penundaan yang ditetapkan. Di dalam fungsi setTimeout Anda dapat melakukan sesuatu ...

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

Anda mungkin bisa menulis implementasi kustom click / dblclick Anda sendiri agar menunggu klik ekstra. Saya tidak melihat apa pun di fungsi inti jQuery yang akan membantu Anda mencapai ini.

Kutipan dari .dblclick () di situs jQuery

Tidak disarankan untuk mengikat penangan ke kejadian click dan dblclick untuk elemen yang sama. Urutan peristiwa yang dipicu bervariasi dari browser ke browser, dengan beberapa menerima dua peristiwa klik sebelum dblclick dan yang lainnya hanya satu. Sensitivitas klik dua kali (waktu maksimum antara klik yang dideteksi sebagai klik dua kali) dapat bervariasi menurut sistem operasi dan browser, dan seringkali dapat dikonfigurasi oleh pengguna.

Lihat kode berikut

$("#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 masuk ke sini http://jsfiddle.net/cB484/

Saya telah menulis sebuah plugin jQuery yang memungkinkan juga untuk mendelegasikan event click dan 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
});

saya menerapkan solusi sederhana ini, http://jsfiddle.net/533135/VHkLR/5/
kode html

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

kode skrip

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

tidak terlalu lamban

Solusi ini berhasil untuk saya

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

Saya membuat beberapa perubahan pada jawaban di atas di sini yang masih berfungsi dengan baik: 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);

Dan akhirnya kami gunakan sebagai.

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

Sama seperti jawaban di atas tetapi memungkinkan untuk klik tiga kali. (Delay 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
    });
});

Ini adalah metode yang dapat Anda lakukan menggunakan JavaScript dasar, yang berfungsi untuk saya:

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

Di bawah ini adalah pendekatan sederhana saya untuk masalah ini.

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

Penerapan:

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

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

Periksa elemen yang diklik di Firefox / Chrome untuk melihat klik data naik dan turun saat Anda mengklik, sesuaikan waktu (1000) agar sesuai.