सवाल एकल क्लिक ईवेंट को अलग करने और ईवेंट पर डबल क्लिक करने के लिए कैसे?


मेरे पास आईडी के साथ ली में एक बटन है "my_id"। मैं संलग्न हुआ two jquery इस तत्व के साथ घटनाओं

1.  $("#my_id").click(function() { 
            alert('single click');
    });

2.   $("#my_id").dblclick(function() {
              alert('double click');
    });

लेकिन हर बार यह मुझे देता है single click


76
2018-03-31 08:24


मूल


एकल क्लिक को हमेशा आग लगनी पड़ेगी, यह जानना असंभव है कि क्या डबल क्लिक होने वाला है, जब तक यह वास्तव में निर्दिष्ट डबल क्लिक समय के भीतर न हो। - Pieter Germishuys
यह संभव है, मेरा जवाब जांचें। पहले क्लिक के बाद आपको कुछ एमएस इंतजार करना होगा और निर्दिष्ट समय तक एक नया क्लिक है या नहीं। इस तरह, आप यह जान सकते हैं कि यह सिर्फ एक साधारण या डबल क्लिक है या नहीं। - Adrien Schuler


जवाब:


पहले क्लिक के बाद एक और क्लिक देखने के लिए आपको एक टाइमआउट का उपयोग करने की आवश्यकता है।

यहाँ चाल है:

// Author:  Jacek Becela
// Source:  http://gist.github.com/399624
// License: MIT

jQuery.fn.single_double_click = function(single_click_callback, double_click_callback, timeout) {
  return this.each(function(){
    var clicks = 0, self = this;
    jQuery(this).click(function(event){
      clicks++;
      if (clicks == 1) {
        setTimeout(function(){
          if(clicks == 1) {
            single_click_callback.call(self, event);
          } else {
            double_click_callback.call(self, event);
          }
          clicks = 0;
        }, timeout || 300);
      }
    });
  });
}

उपयोग:

$("button").single_double_click(function () {
  alert("Try double-clicking me!")
}, function () {
  alert("Double click detected, I'm hiding")
  $(this).hide()
})
<button>Click Me!</button>

संपादित करें:

जैसा कि नीचे बताया गया है, मूल का उपयोग करना पसंद करते हैं dblclick घटना: http://www.quirksmode.org/dom/events/click.html

या jQuery द्वारा प्रदान किया गया एक: http://api.jquery.com/dblclick/


45
2018-03-31 08:30



यह सामान्य रूप से अच्छी तरह से काम कर रहा प्रतीत होता है लेकिन क्लिक के बीच अंतराल का समय नहीं है (जिसके द्वारा दो क्लिक को डबल-क्लिक के रूप में व्याख्या किया जाता है) सिस्टम कॉन्फ़िगरेशन से भिन्न होता है? यह भरोसा करना शायद सुरक्षित है dblclick घटना - Jon z
हाँ मुझे लगता है कि तुम सही हो, dblclick निश्चित रूप से आज जाने का रास्ता है। jQuery भी इस घटना को संभालता है: api.jquery.com/dblclick - Adrien Schuler
@AdrienSchuler - आपके द्वारा लिंक किए गए दस्तावेज़ से: एक ही तत्व के लिए क्लिक और dblclick घटनाओं दोनों के लिए हैंडलर बांधना अचूक है। प्रश्न होने के बारे में है दोनों। - Álvaro González
अच्छा गीस्ट, धन्यवाद। - huesforalice


का व्यवहार dblclick घटना में समझाया गया है quirksmode

ए के लिए घटनाओं का क्रम dblclick है:

  1. माउस नीचे
  2. mouseup
  3. क्लिक
  4. माउस नीचे
  5. mouseup
  6. क्लिक
  7. dblclick

इस नियम का एक अपवाद है (बेशक) इंटरनेट एक्सप्लोरर के अपने कस्टम ऑर्डर के साथ:

  1. माउस नीचे
  2. mouseup
  3. क्लिक
  4. mouseup
  5. dblclick

जैसा कि आप देख सकते हैं, एक ही तत्व पर दोनों घटनाओं को एक साथ सुनकर आपके लिए अतिरिक्त कॉल होंगे click हैंडलर।


68
2018-04-01 09:30



निश्चित नहीं dblclick यहां तक ​​कि भरोसेमंद भी है ... अगर मैं एक बार क्लिक करता हूं ... एक या दो प्रतीक्षा करें, फिर दोबारा क्लिक करें, मुझे एक मिलता है dblclick दूसरे क्लिक पर घटना! - Michael


एक साधारण कार्य कोई jquery या अन्य ढांचे की आवश्यकता नहीं है। पैरामीटर के रूप में अपने कार्यों को पास करें

<div onclick="doubleclick(this, function(){alert('single')}, function(){alert('double')})">click me</div>
    <script>
        function doubleclick(el, onsingle, ondouble) {
            if (el.getAttribute("data-dblclick") == null) {
                el.setAttribute("data-dblclick", 1);
                setTimeout(function () {
                    if (el.getAttribute("data-dblclick") == 1) {
                        onsingle();
                    }
                    el.removeAttribute("data-dblclick");
                }, 300);
            } else {
                el.removeAttribute("data-dblclick");
                ondouble();
            }
        }
    </script>

17
2018-04-16 09:16



मुझे लगता है कि यह सबसे अच्छा जवाब होना चाहिए। हालांकि, मुझे विंडोज आईई 8 पर काम करने के लिए टाइमआउट को 200 तक कम करना पड़ा, लेकिन यह मान ओएस और उपयोगकर्ता निर्भर हो सकता है। और डबल क्लिक पंजीकृत होने पर क्लिक के निष्पादन को रद्द करने में सक्षम होने के लिए टाइमर संदर्भ भी सहेजा गया। - xpereta
कोड के इस टुकड़े के लिए धन्यवाद, यह क्रोम और फ़ायरफ़ॉक्स पर बहुत अच्छा काम करता है (हालांकि क्रोम को इस हैक को डीबीएल और सिंगल के साथ काम करने की आवश्यकता नहीं है)। - victor
का उपयोग करते हुए el.dataset.dblclick अब यह करने का एक अच्छा तरीका होगा। - WORMSS


मुझे डर है कि व्यवहार ब्राउज़र निर्भर है:

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

http://api.jquery.com/dblclick/

फ़ायरफ़ॉक्स, अलर्ट () में अपना कोड चला रहा है click() हैंडलर आपको दूसरी बार क्लिक करने से रोकता है। यदि आप ऐसी चेतावनी हटाते हैं, तो आप दोनों घटनाएं प्राप्त करते हैं।


12
2018-03-31 08:30





अच्छी तरह से डबल क्लिक करने के लिए (दो बार क्लिक करें) आपको पहले एक बार क्लिक करना होगा। click() हैंडलर आपके पहले क्लिक पर आग लगती है, और चूंकि अलर्ट पॉप अप हो जाता है, इसलिए आपके पास दूसरी क्लिक को आग लगाने का मौका नहीं है dblclick() हैंडलर।

अपने हैंडलर को किसी अन्य के अलावा कुछ करने के लिए बदलें alert() और आप व्यवहार देखेंगे। (शायद तत्व के पृष्ठभूमि रंग को बदलें):

$("#my_id").click(function() { 
    $(this).css('backgroundColor', 'red')
});

$("#my_id").dblclick(function() {
    $(this).css('backgroundColor', 'green')
});

8
2018-03-31 08:29



अच्छा बिंदु - अलर्ट निष्पादन रोकता है। - Jon z


इन उत्तरों में से कोई भी मेरी आवश्यकताओं को संतुष्ट नहीं करता है इसलिए मैंने @AdrienSchuler द्वारा पोस्ट की गई गस्ट द्वारा प्रेरित समाधान बनाया। इस समाधान का केवल तभी उपयोग करें जब आप एक क्लिक को बाध्य करना चाहते हैं और एक तत्व पर डबल क्लिक करें। अन्यथा मैं मूल का उपयोग करने की सलाह देते हैं click तथा dblclick श्रोताओं।

ये अंतर हैं:

  • Vanillajs, कोई निर्भरता नहीं
  • पर इंतजार मत करो setTimeout क्लिक या डबलक्लिक हैंडलर को संभालने के लिए
  • डबल क्लिक करने पर पहले क्लिक हैंडलर, फिर डबलक्लिक हैंडलर को आग लगती है

जावास्क्रिप्ट:

function makeDoubleClick(doubleClickCallback, singleClickCallback) {
    var clicks = 0, timeout;
    return function() {
        clicks++;
        if (clicks == 1) {
            singleClickCallback && singleClickCallback.apply(this, arguments);
            timeout = setTimeout(function() { clicks = 0; }, 400);
        } else {
            timeout && clearTimeout(timeout);
            doubleClickCallback && doubleClickCallback.apply(this, arguments);
            clicks = 0;
        }
    };
}

उपयोग:

var singleClick = function(){ console.log('single click') };
var doubleClick = function(){ console.log('double click') };
element.addEventListener('click', makeDoubleClick(doubleClick, singleClick));

नीचे jsfiddle में उपयोग है, jQuery बटन स्वीकार्य उत्तर का व्यवहार है।

jsfiddle


5
2017-10-10 09:59



उपरोक्त कोड और आपके पहेली के 'वेनिला' संस्करण काम नहीं करते हैं ... यहां एक निश्चित वेनिला संस्करण है: jsfiddle.net/jeum/cpbwx5vr/19 - jeum
@jeum यह अभी भी हर ब्राउज़र में मेरे लिए चाल है। क्या "काम नहीं करता" और आप क्या उम्मीद करते हैं? ऐसा लगता है कि आपका संस्करण ऐसा नहीं कर रहा है जो मैंने इरादा किया था। - A1rPun
मुट्ठी मैंने अपने संस्करण को संशोधित किया है (डबल बंद हटा दिया गया है), कृपया नया प्रयास करें: jsfiddle.net/jeum/cpbwx5vr/20 आपके फीडल (वेनिला संस्करण) के साथ समस्या यह है कि डबल-क्लिक एक सिंगल हैंडलर ट्रिगर करता है: यह मेरे लिए एकल + डबल पुनर्प्राप्त करता है। - jeum
@jeum कि कोई एक त्रुटि देता है। हाँ मेरा जवाब यहां स्वीकृत और अन्य उत्तरों से अलग है और मैं इस पंक्ति में यह अंतर भी निर्दिष्ट करता हूं: एक क्लिक फायर करें, फिर एक डबलक्लिक (सीधे डबलक्लिक पर न जाएं) - A1rPun
हाँ फिर से त्रुटि, तो यह संस्करण मुख्य प्रश्न का जवाब देता है: jsfiddle.net/jeum/cpbwx5vr/21। अब आपके संस्करण के बारे में (यह सच है कि मुझे समझ में नहीं आया), क्या आपने देखा है कि 'jQuery' आपके बेड़े में जो चाहते हैं उसे प्राप्त नहीं करता है? - jeum


एक और सरल वेनिला समाधान पर आधारित है A1rPun जवाब (देखें उसका बेवकूफ jQuery समाधान के लिए, और दोनों में हैं यह वाला)।

ऐसा लगता है कि उपयोगकर्ता डबल-क्लिक करते समय एक-क्लिक हैंडलर को ट्रिगर नहीं करने के लिए, एकल-क्लिक हैंडलर को देरी के बाद आवश्यक रूप से ट्रिगर किया जाता है ...

var single = function(e){console.log('single')},
    double = function(e){console.log('double')};

var makeDoubleClick = function(e) {

  var clicks = 0,
      timeout;

  return function (e) {

    clicks++;

    if (clicks == 1) {
      timeout = setTimeout(function () {
        single(e);
        clicks = 0;
      }, 250);
    } else {
      clearTimeout(timeout);
      double(e);
      clicks = 0;
    }
  };
}
document.getElementById('btnVanilla').addEventListener('click', makeDoubleClick(), false);

4
2018-03-22 17:08



यदि आप एक क्लिक को निकाल नहीं चाहते हैं तो यह वास्तव में सबसे अच्छा विकल्प है :) - A1rPun


मनमानी घटनाओं के लिए जीम के कोड का एक विकल्प यहां दिया गया है:

 var multiClickHandler = function (handlers, delay) {
    var clicks = 0, timeout, delay = delay || 250;
    return function (e) {
      clicks++;
      clearTimeout(timeout);
      timeout = setTimeout(function () {
        if(handlers[clicks]) handlers[clicks](e);
        clicks = 0;
      }, delay);
    };
  }

  cy.on('click', 'node', multiClickHandler({
    1: function(e){console.log('single clicked ', e.cyTarget.id())},
    2: function(e){console.log('double clicked ', e.cyTarget.id())},
    3: function(e){console.log('triple clicked ', e.cyTarget.id())},
    4: function(e){console.log('quadro clicked ', e.cyTarget.id())},
    // ...
  }, 300));

ए के लिए इसकी आवश्यकता है cytoscape.js एप्लिकेशन।


3
2018-05-04 16:43



अच्छा! हम लौटे हुए फ़ंक्शन के अंदर एक नया चर घोषित कर सकते हैं और इसे असाइन कर सकते हैं this, जो क्लिक किए गए तत्व है, और इसे हैंडलर (साथ में) पास कर दें e या इसके बजाय)। - HeyJude


उत्कृष्ट jQuery चमक प्लगइन का प्रयोग करें। प्लगइन आपको पहले और अंतिम क्लिक का पता लगाने का विकल्प देता है। आप इसे क्लिक करके क्लिक करके और क्लिक करके डीबीब्लक्लिक के बीच अंतर करने के लिए इसका उपयोग कर सकते हैं कि पहले क्लिक द्वारा एक और क्लिक किया गया था या नहीं।

इसे देखें http://balupton.com/sandbox/jquery-sparkle/demo/


2
2018-03-31 08:44





मैंने एक साधारण jQuery प्लगइन लिखा है जो आपको एक डबल-क्लिक से सिंगल-क्लिक को अलग करने के लिए कस्टम 'सिंगलक्लिक' ईवेंट का उपयोग करने देता है:

https://github.com/omriyariv/jquery-singleclick

$('#someDiv').on('singleclick', function(e) {
    // The event will be fired with a small delay.
    console.log('This is certainly a single-click');
}

2
2017-09-27 13:50





मुझे jquery (और अन्य 90-140k libs) से बचने के लिए पसंद है, और जैसा कि उल्लेखनीय ब्राउज़र पहले क्लिक करते हैं, इसलिए मैंने जो वेबसाइट बनाई है, उस पर मैंने किया है (इस उदाहरण में एक क्लिक किए गए स्थान स्थानीय x y प्राप्त करने को भी शामिल किया गया है)

clicksNow-0; //global js, owell

function notify2(e, right) {  // called from onclick= and oncontextmenu= (rc)
var x,y,xx,yy;
var ele = document.getElementById('wrap');  
    // offset fixed parent for local win x y
var xxx= ele.offsetLeft;
var yyy= ele.offsetTop;

//NScape
if (document.layers || document.getElementById&&!document.all) {
    xx= e.pageX;
    yy= e.pageY;
} else {
    xx= e.clientX;
    yy= e.clientY;
}
x=xx-xxx;
y=yy-yyy;

clicksNow++;
    // 200 (2/10ths a sec) is about a low as i seem to be able to go
setTimeout( "processClick( " + right + " , " + x + " , " + y + ")", 200);
}

function processClick(right, x, y) {
if (clicksNow==0) return; // already processed as dblclick
if (clicksNow==2) alert('dbl');
clicksNow=0;
    ... handle, etc ...
}

उम्मीद है की वो मदद करदे


0
2017-11-19 20:10



आपके गेम के यूआरएल को आपके उत्तर को समझने की आवश्यकता नहीं है। मैं इसे हटा रहा हूं ताकि यह पोस्ट स्पैम के प्रयास के रूप में नहीं देखा जा सके। - Andrew Barber
केवल शून्य, 200 जादू निरंतर है और ओएस में उपयोगकर्ता की माउस सेटिंग्स से काफी भिन्न हो सकता है - Danubian Sailor