Jquery mengikat klik ganda dan klik tunggal secara terpisah

96

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

jquery  jquery-selectors 
— kritya
sumber
1
— Haim Evgi

Jawaban:

144

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

});
— Garland Pope
sumber
1
Gunakan .delegate () di atas .live ().
— John Strickler
23
gunakan .on()atas keduanya sekarang
— Claudiu
2
Menggunakan solusi ini akan menunda peristiwa klik dalam 700ms! Sangat menjengkelkan bagi pengguna ...
— uriel
1
@uriel, jika menurut Anda 700 md terlalu lama untuk menunggu klik dua kali, cukup perkecil angkanya hingga sesuai dengan preferensi Anda.
— Paus Garland
1
pada jQuery 1.7: Untuk mendukung konten yang dimuat nanti (barang ajax) gunakan $("document").on("click","a" function(e){sebagai gantinya di baris 5. Konstruksi ini menggantikan delegate()penggunaan yang tidak berlaku lagi . Alih-alih documentAnda dapat / harus menggunakan objek induk apa pun dari aDOM bawah sejauh mungkin yang tetap ada sepanjang waktu.
— Hafenkranich
15

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/

— kalterras
sumber
10

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
    }
});
— John Strickler
sumber
Terima kasih banyak. Saya mencoba menambahkan if (klik == 1) tetapi tidak bisakah Anda menambahkan fungsi satu klik. Sekali lagi terima kasih :)
— kritya
@ Kritya Saya mengedit jawaban saya - ini akan bekerja lebih baik untuk Anda. Lihat biola di sini - jsfiddle.net/VfJU4/1
— John Strickler
OOOOh saya mendapat tempat saya salah saya tidak mengatakan itu ',' menjadi kecanduan dreamweaver itu tidak disorot: P wtv Terima kasih :)
— kritya
9

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.

— Mick Hansen
sumber
4

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/

— Muhammad Tahir
sumber
4
Saya suka ide Anda untuk menambahkan kelas dan menggunakannya sebagai hitungan.
— nikhil
jika Anda menambahkan Alert (); alih-alih // kode Anda untuk satu klik, kode tidak berfungsi sama sekali
— Pengembang
4

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);
— IlNidoDelChiurlo
sumber
Plugin ini bagus! Tapi entah kenapa sepertinya tidak berfungsi di IE9? Saya tidak peduli dengan versi yang lebih lama (dan Anda seharusnya tidak lagi saat ini IMO) tetapi saya mencoba untuk mencapai fungsionalitas setidaknya di IE9 - ini adalah browser yang dapat dimiliki siapa pun (tidak ada batasan OS) dan yang memiliki dukungan JS yang baik.
— Dennis98
Penggunaan:$("body").multipleClicks('#mySelector', function(){ /* do something on click */},function(){/* do something on doubleclick */},300);
— Hafenkranich
Yang satu ini sebenarnya memungkinkan Anda untuk menggunakan keduanya - klik dan klik dua kali - pada saat yang sama untuk tindakan yang berbeda. Terima kasih! Yang itu bekerja seperti pesona.
— Hafenkranich
3 
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
});
— Gregory Ray
sumber
Sederhana dan efektif. +1
— Bruce Pierson
3

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

— Chetan Sandeep Renu
sumber
2

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++;
});
— Vitali Korol
sumber
0 
(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);
    }
});
— Sergio FG
sumber
Apa perbedaan antara $ .click dan $ .fn.click?
— FrenkyB
0

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
    });
});
— Luen
sumber
0

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");
}
— pengguna3781586
sumber
0

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.

— mhapps
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.