Jquery बाइंड डबल क्लिक और सिंगल क्लिक अलग से

Question

क्या jquery में कुछ ऐसा है जो मुझे डबल क्लिक और सिंगल क्लिक पर व्यवहार के बीच अंतर करने की अनुमति देगा?

जब मैं दोनों को एक ही तत्व से बाँधता हूँ तो केवल एक क्लिक ही निष्पादित हो जाता है।

क्या एक ऐसा तरीका है जो सिंगल क्लिक के निष्पादन से पहले कुछ समय तक इंतजार करता है ताकि उपयोगकर्ता फिर से क्लिक करे या नहीं?

धन्यवाद :)

Comments

stackoverflow.com/questions/1472433/…

— हैम इवगी

Answer 1

मैंने पाया कि जॉन स्ट्रिकलर के जवाब में वह नहीं हुआ जो मैं उम्मीद कर रहा था। एक बार दो-सेकंड विंडो के भीतर एक दूसरे क्लिक से अलर्ट चालू हो जाता है, बाद में हर क्लिक एक और अलर्ट को ट्रिगर करता है जब तक कि आप दोबारा क्लिक करने से दो सेकंड इंतजार नहीं करते। इसलिए जॉन के कोड के साथ, एक ट्रिपल क्लिक दो डबल क्लिक के रूप में कार्य करता है जहां मैं यह उम्मीद करूंगा कि यह एक सिंगल क्लिक के बाद डबल क्लिक की तरह काम करे।

मैंने इस तरह से कार्य करने के लिए और मेरे दिमाग को बेहतर तरीके से समझने के लिए एक तरह से प्रवाह करने के लिए उसके समाधान को फिर से काम किया है। मैंने 2000 से 700 तक की देरी को बेहतर तरीके से कम करने के लिए गिरा दिया जो मुझे एक सामान्य संवेदनशीलता होगी। यहाँ की फिडेल है: http://jsfiddle.net/KpCwN/4/ ।

नींव के लिए धन्यवाद, जॉन। मुझे उम्मीद है कि यह वैकल्पिक संस्करण दूसरों के लिए उपयोगी है।

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

});

Comments

.Delegate () over .live () का उपयोग करें।

— जॉन स्ट्राइकर

का उपयोग .on()अधिक उम्र के लोगों के दोनों अब

— Claudiu

इस समाधान का उपयोग 700ms में क्लिक घटना देरी! यह उपयोगकर्ता के लिए बहुत कष्टप्रद है ...

— मूत्र

@uriel, अगर आपको लगता है कि 700 एमएस एक डबल क्लिक के लिए प्रतीक्षा करने के लिए बहुत लंबा है, तो बस संख्या को तब तक छोटा करें जब तक कि यह आपकी पसंद के अनुरूप न हो।

— गारलैंड पोप

jQuery के 1.7 के रूप में: बाद में लोड की गई सामग्री (अजाक्स सामान) का उपयोग $("document").on("click","a" function(e){करने के लिए लाइन 5 के बजाय उपयोग करें । यह निर्माण हटाए गए delegate()उपयोग को बदलता है । इसके बजाय documentआप aगर्त के बहाव को बनाए रखने वाले डोम के किसी भी मूल वस्तु का उपयोग / कर सकते हैं / करना चाहिए ।

— हफेनक्रानिक

Answer 2

"एनओटी रिस्पॉन्सिंग" से दिया गया समाधान दोनों घटनाओं पर क्लिक करने पर लगता है, जब डबल क्लिक किया जाता है, तो क्लिक करें और क्लिक करें। हालाँकि मुझे लगता है कि यह सही दिशा में इशारा करता है।

मैंने एक छोटा सा परिवर्तन किया, यह परिणाम है:

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

कोशिश करो

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

Answer 3

ज़रूर, दो हैंडलर को बांधें, एक को clickऔर दूसरे को dblclick। एक वैरिएबल बनाएं जो हर क्लिक पर बढ़े। फिर एक सेट देरी के बाद रीसेट करता है। सेटटाइमआउट फ़ंक्शन के अंदर आप कुछ कर सकते हैं ...

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

Comments

बहुत बहुत धन्यवाद। मैंने अगर (क्लिक == 1) जोड़ने की कोशिश की, लेकिन यह नहीं कर सकता तो कृपया सिंगल क्लिक फ़ंक्शन जोड़ सकते हैं। फिर से धन्यवाद :)

— कृतिका

@kritya मैंने अपना जवाब संपादित किया - यह आपके लिए बेहतर काम करना चाहिए। यहां देखें फिडल - jsfiddle.net/VfJU4/1

— जॉन स्ट्राइकर

OOOOh मुझे मिल गया, जहां मैं गलत था, मैंने वह नहीं किया ',' सपना देखने के आदी होने के कारण इसे उजागर नहीं किया: P wtv धन्यवाद :)

— kritya

Answer 4

आप शायद अतिरिक्त क्लिक के लिए प्रतीक्षा करने के लिए क्लिक / dblclick का अपना कस्टम कार्यान्वयन लिख सकते हैं। मुझे कोर jQuery फ़ंक्शंस में कुछ भी नहीं दिखता है जो आपको इसे प्राप्त करने में मदद करेगा।

JQuery साइट पर .dblclick () से उद्धरण

एक ही तत्व के लिए क्लिक और dblclick घटनाओं दोनों के लिए हैंडलर को बांधना अनुचित है। ट्रिगर किए गए ईवेंट का क्रम ब्राउज़र से ब्राउज़र तक भिन्न होता है, जिसमें कुछ क्लिक करने से पहले दो बार ईवेंट प्राप्त होते हैं और अन्य केवल एक। डबल-क्लिक संवेदनशीलता (डबल क्लिक के रूप में पहचाने जाने वाले क्लिकों के बीच अधिकतम समय) ऑपरेटिंग सिस्टम और ब्राउज़र द्वारा भिन्न हो सकती है, और अक्सर उपयोगकर्ता-कॉन्फ़िगर योग्य है।

Answer 5

निम्नलिखित कोड को देखें

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

डेमो यहाँ जाता है http://jsfiddle.net/cB484/

Comments

मुझे कक्षा जोड़ने और इसे एक गिनती के रूप में उपयोग करने का आपका विचार पसंद है।

— निखिल

यदि आप अलर्ट () जोड़ते हैं; // के बजाय एकल क्लिक के लिए आपका कोड यह बिल्कुल भी काम नहीं कर रहा है

— डेवलपर

Answer 6

मैंने एक jQuery प्लगइन लिखा है जो क्लिक और डब्लक्लिक इवेंट्स को प्रत्यायोजित करने की अनुमति देता है

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

Comments

यह प्लगइन महान है! लेकिन किसी तरह यह IE9 में काम करने के लिए प्रतीत नहीं होता है? मैं पुराने संस्करणों की परवाह नहीं करता (और आपको आजकल IMO नहीं करना चाहिए) लेकिन मैं कम से कम IE9 पर कार्यक्षमता प्राप्त करने की कोशिश करता हूं - यह वह ब्राउज़र है जो किसी के पास भी हो सकता है (कोई ओएस सीमाएं नहीं) और जिसमें अच्छा JS समर्थन हो।

— डेनिस 98

उपयोग:$("body").multipleClicks('#mySelector', function(){ /* do something on click */},function(){/* do something on doubleclick */},300);

— हाफेनक्रानिक

यह वास्तव में आपको दोनों का उपयोग करने में सक्षम बनाता है - अलग-अलग कार्यों के लिए एक ही समय में क्लिक और डबलक्लिक। धन्यवाद! वह एक आकर्षण की तरह काम करता है।

— हाफेनक्रिंच

Answer 7

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

Comments

सरल और प्रभावी। +1

— ब्रूस पियर्सन

Answer 8

मैं इस सरल समाधान, http://jsfiddle.net/533135/VHkLR/5/ html कोड को लागू कर रहा हूं

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

स्क्रिप्ट कोड

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

यह बहुत ज्यादा सुस्त नहीं है

Answer 9

यह समाधान मेरे लिए काम करता है

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

Answer 10

मैंने यहाँ उपरोक्त उत्तरों में कुछ बदलाव किए हैं जो अभी भी बहुत अच्छा काम करते हैं: http://jsfiddle.net/arondraper/R8cDR/

Answer 11

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

और अंत में हम उपयोग करते हैं।

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

Comments

$ .Click और $ .fn.click में क्या अंतर है?

— FrenkyB

Answer 12

उपरोक्त उत्तर के समान लेकिन ट्रिपल क्लिक के लिए अनुमति देता है। (विलंब 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
    });
});

Answer 13

यह एक तरीका है जिसे आप मूल जावास्क्रिप्ट का उपयोग कर सकते हैं, जो मेरे लिए काम करता है:

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

Answer 14

नीचे इस मुद्दे पर मेरा सरल दृष्टिकोण है।

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

कार्यान्वयन:

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

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

डेटा-क्लिक को ऊपर और नीचे जाते देखने के लिए फ़ायरफ़ॉक्स / क्रोम में क्लिक किए गए तत्व का निरीक्षण करें, समय (1000) को सूट में समायोजित करें।