ईवेंट को डबल-क्लिक करते समय क्लिक/माउसअप ईवेंट रद्द करने की आवश्यकता है

Question

यह कैसे किया जाता है?

Answer 1

यह एक अच्छा सवाल है, और मुझे वास्तव में नहीं लगता कि यह आसानी से किया जा सकता है। (Some discussion on this)

यदि यह सुपर duper महत्वपूर्ण है कि आप इस कार्यक्षमता के लिए के लिए, आप यह बहुत की तरह हैक कर सकता है:

function singleClick(e) { 
    // do something, "this" will be the DOM element 
} 

function doubleClick(e) { 
    // do something, "this" will be the DOM element 
} 

$(selector).click(function(e) { 
    var that = this; 
    setTimeout(function() { 
     var dblclick = parseInt($(that).data('double'), 10); 
     if (dblclick > 0) { 
      $(that).data('double', dblclick-1); 
     } else { 
      singleClick.call(that, e); 
     } 
    }, 300); 
}).dblclick(function(e) { 
    $(this).data('double', 2); 
    doubleClick.call(this, e); 
}); 

और यहाँ एक example of it at work है।

टिप्पणियों में बताया गया है कि इसके लिए एक प्लगइन है जो मैंने बहुत अधिक किया है, लेकिन यह आपके लिए संकुल करता है ताकि आपको बदसूरत: FixClick देखने की आवश्यकता न हो।

Answer 2

अन्य उत्तरों में उल्लिखित तकनीक debouncing के रूप में जानी जाती है।

Answer 3

रेमंड चेन ने implications of single-versus-double clicking में से कुछ पर चर्चा की है - हालांकि वह विंडोज के संदर्भ में बात कर रहा है, वह जो कहता है वह ब्राउज़र-आधारित यूआई डिज़ाइन से प्रासंगिक है।

मूल रूप से, एक डबल क्लिक पर की गई कार्रवाई एक क्लिक के बाद करने के लिए एक तार्किक बात होनी चाहिए। तो उदाहरण के लिए, डेस्कटॉप यूआई में, एकल क्लिक एक आइटम का चयन करता है, और डबल क्लिक इसे खोलता है (उदा। फ़ाइल खोलता है, या एप्लिकेशन लॉन्च करता है)। उपयोगकर्ता को इसे खोलने के लिए फ़ाइल का चयन करना होगा, इसलिए इससे कोई फर्क नहीं पड़ता कि डबल क्लिक एक्शन से पहले एक क्लिक एक्शन लिया जाता है।

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

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

आपको यह भी पता होना चाहिए कि कुछ उपयोगकर्ता बहुत लंबे समय तक डबल क्लिक समय निर्धारित करते हैं। उदाहरण के लिए, गठिया के हाथों में उनके सिस्टम वरीयताओं में दूसरे सेट से अधिक का डबल क्लिक समय हो सकता है, इसलिए आपकी पसंद के कुछ मनमाने ढंग से समय अवधि के आधार पर बहस करने वाली तकनीक आपके यूआई घटक को उन लोगों के लिए पहुंच योग्य नहीं बनाती है यदि एक क्लिक क्लिक करने से डबल क्लिक एक्शन लेने से रोकता है। जहां तक ​​मुझे पता है, "एक क्लिक पर जो हुआ वह पूर्ववत करें" तकनीक केवल इसके लिए एकमात्र व्यवहार्य कामकाज है।

Answer 4

jQuery स्पार्कल एक सिंगलक्लिक कस्टम ईवेंट को लागू करके, इसके लिए एक साफ सुरुचिपूर्ण समाधान प्रदान करता है। ऐसा करने से, आप इसे किसी भी अन्य घटना की तरह उपयोग कर सकते हैं, तो:

$('#el').singleclick(function(){}); 
// or event 
$('#el').bind('singleclick', function(){}); 

यह भी क्लिक की एक श्रृंखला के अंतिम और पहली क्लिक के लिए कस्टम घटनाओं प्रदान करता है। और अंतिम घड़ी कस्टम घटना वास्तव में क्लिक की मात्रा वापस पास करता है! तो आप यह कर सकते हैं!

$('#el').lastclick(function(event,clicks){ 
    if (clicks === 3) alert('Tripple Click!'); 
}); 

आप कस्टम घटना here को परिभाषित करने के लिए स्रोत कोड प्राप्त कर सकते हैं।

यह एजीपीएल लाइसेंस के तहत खुला स्रोत है, इसलिए आप इससे निपटने के लिए स्वतंत्र महसूस कर सकते हैं कि आपको इससे क्या चिंता है!:-) यह दिन-दर-दिन आधार पर भी सक्रिय रूप से विकसित होता है ताकि आप कभी भी समर्थन पर कम न हों।

लेकिन सबसे महत्वपूर्ण बात यह है कि यह प्लगइन और एक्सटेंशन को और अधिक आसानी से विकसित करने की अनुमति देने के लिए एक DRY प्लगइन/प्रभाव फ्रेमवर्क है। तो उम्मीद है कि यह उस लक्ष्य को प्राप्त करने में मदद करता है!

Answer 5

यदि यह एक फॉर्म सबमिट करने वाले बटन के लिए है (जो मूल पोस्टर के लिए जरूरी नहीं है, लेकिन Google के माध्यम से यहां आने वाले अन्य लोगों के मामले में हो सकता है), तो एक आसान विकल्प उस तत्व को अक्षम करना होगा आपके क्लिक इवेंट हैंडलर पर क्लिक किया जा रहा है:

$(selector).click(function(e) { 
    $(this).prop('disable', true); 
}