किसी तत्व पर ऑनक्लिक और ऑनडब्लक्लिक दोनों का उपयोग कैसे करें?

Question

मेरे पास मेरे पृष्ठ पर एक तत्व है कि मुझे ऑनक्लिक और ऑनडब्लॉक ईवेंट हैंडलर को संलग्न करने की आवश्यकता है। जब एक क्लिक होता है, तो इसे डबल-क्लिक से कुछ अलग करना चाहिए। जब मैंने पहली बार यह काम करने की कोशिश करना शुरू किया, तो मेरा सिर कताई शुरू कर दिया। जाहिर है, जब आप डबल-क्लिक करते हैं तो ऑनक्लिक हमेशा आग लग जाएगा। तो मैं इस तरह एक टाइमआउट आधारित संरचना का उपयोग ...

window.onload = function() { 
    var timer; 
    var el = document.getElementById('testButton'); 

    el.onclick = function() { 
    timer = setTimeout(function() { alert('Single'); }, 150);   
    } 

    el.ondblclick = function() { 
    clearTimeout(timer); 
    alert('Double'); 
    } 
} 

की कोशिश की लेकिन मैं असंगत परिणाम (IE8 का प्रयोग करके) मिला है। यह ठीक से कई बार काम करेगा, लेकिन कभी-कभी मुझे "सिंगल" अलर्ट दो बार मिल जाएगा।

क्या किसी ने इससे पहले किया है? क्या कोई और प्रभावी तरीका है?

Answer 1

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

el.onclick = function() { 
    if (timer) clearTimeout(timer); 
    timer = setTimeout(function() { alert('Single'); }, 250);   
} 

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

Answer 2

यदि आपको 2 अलर्ट मिल रहे हैं, तो ऐसा लगता है कि डबल क्लिक को हटाने के लिए आपका थ्रेसहोल्ड बहुत छोटा है। 150 से 300ms तक बढ़ने का प्रयास करें।

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

1) वास्तव में डबल क्लिक करें घटना फायरिंग के लिए एक और समाप्ति सेट:

मैं इस संभावित समस्या के लिए दो संभव समाधान देखते हैं। अपने कोड में चिह्नित करें कि डबल क्लिक इवेंट आग लग रहा है। तब, जब 2 'सिंगल क्लिक' घटना की आग, यह इस राज्य पर जांच कर सकते हैं, और कहते हैं कि "उफ़, DBL क्लिक लंबित है, इसलिए मैं कुछ नहीं करूँगा"

2) दूसरा विकल्प आपके लक्षित कार्यों स्वैप करने के लिए है क्लिक घटनाओं के आधार पर बाहर। यह कुछ इस तरह दिख सकता है:

window.onload = function() { 
    var timer; 
    var el = document.getElementById('testButton'); 

    var firing = false; 
    var singleClick = function(){ 
    alert('Single'); 
    }; 

    var doubleClick = function(){ 
    alert('Double'); 
    }; 

    var firingFunc = singleClick; 

    el.onclick = function() { 
    // Detect the 2nd single click event, so we can stop it 
    if(firing) 
     return; 

    firing = true; 
    timer = setTimeout(function() { 
     firingFunc(); 

     // Always revert back to singleClick firing function 
     firingFunc = singleClick; 
     firing = false; 
    }, 150); 

    } 

    el.ondblclick = function() { 
    firingFunc = doubleClick; 
    // Now, when the original timeout of your single click finishes, 
    // firingFunc will be pointing to your doubleClick handler   
    } 
} 

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

हम भी तो हम 2 सिंगल क्लिक घटना रोकना पता है कि एक "फायरिंग" चर है।

एक अन्य विकल्प dblclick घटनाओं पूरी तरह से अनदेखी करने के लिए, और सिर्फ एक क्लिक और टाइमर के साथ यह पता लगा है:

window.onload = function() { 
    var timer; 
    var el = document.getElementById('testButton'); 

    var firing = false; 
    var singleClick = function(){ 
    alert('Single'); 
    }; 

    var doubleClick = function(){ 
    alert('Double'); 
    }; 

    var firingFunc = singleClick; 

    el.onclick = function() { 
    // Detect the 2nd single click event, so we can set it to doubleClick 
    if(firing){ 
     firingFunc = doubleClick; 
     return; 
    } 

    firing = true; 
    timer = setTimeout(function() { 
     firingFunc(); 

     // Always revert back to singleClick firing function 
     firingFunc = singleClick; 
     firing = false; 
    }, 150); 

    } 
} 

यह अपरीक्षित :) है

Answer 3

सरल:

obj.onclick=function(e){ 
    if(obj.timerID){ 
      clearTimeout(obj.timerID); 
      obj.timerID=null; 
      console.log("double") 
     } 
     else{ 
      obj.timerID=setTimeout(function(){ 
              obj.timerID=null; 
              console.log("single") 
              },250)} 
}//onclick 

Answer 4

छोटे ठीक

 if(typeof dbtimer != "undefined"){ 
      dbclearTimeout(timer); 
      timer = undefined; 
      //double click 
     }else{ 
      dbtimer = setTimeout(function() { 
      dbtimer = undefined; 
      //single click 
      }, 250); 
     } 

Answer 5

, cellclick : 
     function(){ 
      setTimeout(function(){ 
       if (this.dblclickchk) return; 
       setTimeout(function(){ 
        click event......     
       },100); 
      },500); 
     } 

, celldblclick : 
     function(){ 
      setTimeout(function(){ 
       this.dblclickchk = true; 
       setTimeout(function(){ 
              dblclick event..... 
       },100); 
       setTimeout(function(){ 
        this.dblclickchk = false; 
       },3000); 
      },1); 
     }