डीबीएलक्लिक घटना से आग लगने पर ईवेंट को फायरिंग से रोकें

Question

मैं एक डोम तत्व पर क्लिक और dblclick ईवेंट दोनों को संभालने में कामयाब रहा हूं। प्रत्येक व्यक्ति एक अलग कमांड करता है, लेकिन मुझे लगता है कि तत्व पर डबल क्लिक करते समय, डबल क्लिक ईवेंट को फायर करने के अलावा, क्लिक ईवेंट को दो बार निकाल दिया जाता है। इस व्यवहार को रोकने के लिए सबसे अच्छा तरीका क्या है?

Answer 1

एक टिप्पणी में, आप ने कहा,

मैं 300 एमएस (एक ध्यान देने योग्य और कष्टप्रद देरी) और यहां तक ​​कि ...

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

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

---

क्लिक करने और दो बार क्लिक करने के लिए आप दो अलग-अलग कार्रवाइयां क्या कर रहे हैं? आईएमओ, एक सामान्य अनुप्रयोग में आप दोनों घटनाओं को चाहते हैं: उदा। किसी तत्व पर फ़ोकस करने के लिए एकल-क्लिक करें और फिर इसे सक्रिय करने के लिए डबल-क्लिक करें।

जब आपको ईवेंट को अलग करना होगा, तो कुछ एप्लिकेशन डबल-क्लिक के अलावा कुछ और उपयोग करते हैं: उदाहरण के लिए, वे राइट-क्लिक या नियंत्रण-क्लिक का उपयोग करते हैं।

Answer 2

इस मामले में, एकल क्लिक ईवेंट के निष्पादन में देरी करना सबसे अच्छा है। अपने डबल क्लिक हैंडलर को एक वेरिएबल सेट करें जो एकल क्लिक ईवेंट चेक करेगा। यदि उस चर के पास एक विशेष मान है, तो boolDoubleClick == true हो सकता है, तो एक क्लिक पर fire/handle न करें।

Answer 3

AFAIK डोम स्तर 2 घटनाक्रम डबल-क्लिक के लिए कोई विनिर्देश नहीं बनाता है। यह आईई 7 पर मेरे लिए काम नहीं करता है (वहां एक झटका है), लेकिन एफएफ और ओपेरा को spec के प्रबंधन में कोई समस्या नहीं है, जहां मैं क्लिक ईवेंट पर सभी क्रियाएं संलग्न कर सकता हूं, लेकिन डबल-क्लिक के लिए बस "विवरण" तक प्रतीक्षा करें ईवेंट ऑब्जेक्ट की विशेषता 2 है। दस्तावेज़ों से: "यदि एक ही स्क्रीन स्थान पर एकाधिक क्लिक होते हैं, तो अनुक्रम प्रत्येक पुनरावृत्ति के साथ विस्तारित विशेषता विशेषता के साथ दोहराता है।"

Answer 4

अन्य सभी जवाब यहां के लिए धन्यवाद उनमें से संयोजन जब बातचीत दोनों की आवश्यकता है मेरे लिए एक उचित समाधान प्रदान करने के लिए लगता है, लेकिन परस्पर अनन्य रूप:

var pendingClick = 0; 

function xorClick(e) { 
    // kill any pending single clicks 
    if (pendingClick) { 
     clearTimeout(pendingClick); 
     pendingClick = 0; 
    } 

    switch (e.detail) { 
     case 1: 
      pendingClick = setTimeout(function() { 
       console.log('single click action here'); 
      }, 500);// should match OS multi-click speed 
      break; 
     case 2: 
      console.log('double click action here'); 
      break; 
     default: 
      console.log('higher multi-click actions can be added as needed'); 
      break; 
    } 
} 

myElem.addEventListener('click', xorClick, false); 

अद्यतन: मैं एक सामान्यीकृत संस्करण जोड़ा एक क्लिक के उदाहरण के साथ इस Github रेपो के लिए टच डिवाइस के लिए polyfill के साथ-साथ इस दृष्टिकोण का:

https://github.com/mckamey/doubleTap.js

Answer 5

यहाँ है कि मैं क्या disting के लिए क्या किया है

$node.on('click',function(e){ 
     if(e.originalEvent.detail > 1){ 
     return; 
     /* if you are returning a value from this 
     function then return false or cancel 
     the event some other way */ 
     } 
    }); 

: (मैंने किया था के रूप में) एक मॉड्यूल

 node.on('click', function(e) { 

      //Prepare for double click, continue to clickHandler doesn't come soon enough 
      console.log("cleared timeout in click",_this.clickTimeout); 
      clearTimeout(_this.clickTimeout); 
      _this.clickTimeout = setTimeout(function(){ 
       console.log("handling click"); 
       _this.onClick(e); 
      },200); 
      console.log(_this.clickTimeout); 
     }); 

     node.on('dblclick', function (e) { 

      console.log("cleared timeout in dblclick",_this.clickTimeout); 
      clearTimeout(_this.clickTimeout); 
      // Rest of the handler function 

Answer 6

इस पर मामला किसी और stumbles में भीतर uish एक जवाब की तलाश में, पूर्ण सबसे अच्छा समाधान है कि मैं के साथ आ सकता है निम्नलिखित है किया हुआ।यदि एक से अधिक बार वापस क्लिक करें, दूसरा, तीसरा, आदि। आग नहीं होगी मैं निश्चित रूप से किसी भी प्रकार के टाइमर का उपयोग करने के लिए इसे पसंद करता हूं।

मैंने this पढ़कर खुद को इस दिशा में इंगित किया।

---

संयोग: मैं पहली बार इस समस्या पर शोध किया गया था क्योंकि मैंने गलती से डबल एक पृष्ठवार लिंक पर क्लिक किया, और घटना निकाल दिया और दो बार समाप्त होने से पहले कॉलबैक भी हो सकता है।

कोड के साथ ऊपर आ रहा से पहले, मैं

if e.originalEvent.detail === 2 //return 

हालांकि, मैं लिंक पर क्लिक करने के लिए 3 बार (एक ट्रिपल क्लिक करें) कर रहा था था, और हालांकि दूसरे क्लिक नहीं था ' टी आग, तीसरा

Answer 7

मुझे पता है कि यह बिल्ली के रूप में पुराना है, लेकिन सोचा कि मैं किसी भी तरह से पोस्ट करूंगा क्योंकि मैं अभी भी एक ही समस्या में भाग गया था। यहां बताया गया है कि मैंने इसे कैसे हल किया।

$('#alerts-display, #object-display').on('click', ['.item-data-summary', '.item-marker'], function(e) { 
    e.preventDefault(); 

    var id; 

    id = setTimeout(() => { 
     // code to run here 
     return false; 
    }, 150); 

    timeoutIDForDoubleClick.push(id); 
}); 


$('.panel-items-set-marker-view').on('dblclick', ['.summary', '.marker'], function(e) { 
    for (let i = 0; i < timeoutIDForDoubleClick.length; i++) { 
     clearTimeout(timeoutIDForDoubleClick[i]); 
    } 

    // code to run on double click 

    e.preventDefault(); 
});