Jquery bind çift tıklama ve tek tıklama ayrı ayrı

Jquery'de çift tıklama ile tek tıklama davranışını ayırt etmeme izin veren bir şey var mı?

Her ikisini de aynı elemana bağladığımda sadece tek tıklama yürütülüyor.

Kullanıcının tekrar tıklayıp tıklamadığını görmek için tek tıklamanın yürütülmesinden önce biraz beklemenin bir yolu var mı?

Teşekkürler :)

John Strickler'in cevabının beklediğim şeyi tam olarak yapmadığını anladım. Uyarı, iki saniyelik pencerede ikinci bir tıklama ile tetiklendiğinde, sonraki her tıklama, siz tekrar tıklamadan önce iki saniye bekleyene kadar başka bir uyarıyı tetikler. Dolayısıyla, John'un koduyla, üçlü tıklama, çift tıklama ve ardından tek tıklama gibi davranmasını beklediğim iki çift tıklama gibi davranır.

Çözümünü bu şekilde işleyecek ve zihnimin daha iyi anlayabileceği bir şekilde akacak şekilde yeniden çalıştım. Normal bir hassasiyet olarak hissettiğim şeyi daha iyi simüle etmek için gecikmeyi 2000'den 700'e düşürdüm. İşte keman: http://jsfiddle.net/KpCwN/4/ .

Vakıf için teşekkürler, John. Umarım bu alternatif sürüm başkaları için yararlıdır.

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

});

"Yanıt Vermeme" seçeneğinden verilen çözüm, çift tıklandığında her iki olayı da tetikliyor, tıklama ve dblclick. Ancak bunun doğru yönü gösterdiğini düşünüyorum.

Küçük bir değişiklik yaptım, sonuç bu:

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

Dene

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

Elbette, iki işleyiciyi birbirine clickve diğerine bağlayın dblclick. Her tıklamada artan bir değişken oluşturun. daha sonra belirlenen bir gecikmeden sonra sıfırlar. SetTimeout işlevinin içinde bir şeyler yapabilirsiniz ...

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

Ekstra bir tıklama beklemesi için muhtemelen kendi özel tıklama / dblclick uygulamanızı yazabilirsiniz. Temel jQuery işlevlerinde bunu başarmanıza yardımcı olacak hiçbir şey görmüyorum.

JQuery sitesinde .dblclick () ' den alıntı yapın

İşleyicilerin aynı öğe için hem tıklama hem de dblclick olaylarına bağlanması tavsiye edilmez. Tetiklenen olayların sırası, tarayıcıdan tarayıcıya değişir, bazıları dblclick'ten önce iki tıklama olayı alırken diğerleri yalnızca bir tıklama alır. Çift tıklama hassasiyeti (çift tıklama olarak algılanan tıklamalar arasındaki maksimum süre) işletim sistemine ve tarayıcıya göre değişebilir ve genellikle kullanıcı tarafından yapılandırılabilir.

Aşağıdaki koda bakın

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

Tıklama ve dblclick olaylarını da yetkilendirmeye izin veren bir jQuery eklentisi yazdım

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

bu basit çözümü uyguluyorum, http://jsfiddle.net/533135/VHkLR/5/
html kodu

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

komut dosyası kodu

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

çok gecikmeli değil

Bu çözüm benim için çalışıyor

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

Burada yukarıdaki cevaplarda hala harika çalışan bazı değişiklikler yaptım: 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);

Ve sonunda olarak kullanıyoruz.

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

Yukarıdaki yanıtla aynıdır ancak üçlü tıklamaya izin verir. (Gecikme 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
    });
});

Bu, benim için çalışan temel JavaScript'i kullanarak yapabileceğiniz bir yöntemdir:

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

Aşağıda konuya basit yaklaşımım var.

JQuery işlevi:

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

Uygulama:

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

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

Tıklandığında veri tıklamalarının yukarı ve aşağı gittiğini görmek için Firefox / Chrome'da tıklanan öğeyi inceleyin, uygun zamanı (1000) ayarlayın.