Soru tek tıklama etkinliğini ve çift tıklama etkinliğini nasıl ayırt edebilirsiniz?


Kimliğine sahip tek bir düğmem var "my_id". ben ekledim two jquery bu öğe ile olaylar

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

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

Ama her zaman bana verir single click


76
2018-03-31 08:24


Menşei


Tek tıklamayla her zaman ateş etmek zorunda kalacaksınız, belirtilen çift tıklama süresinde gerçekte gerçekleşmediği takdirde çift tıklamanın gerçekleşip gerçekleşmeyeceğini bilmek imkansızdır. - Pieter Germishuys
Bu mümkün, cevabımı kontrol et. İlk tıklamadan sonra birkaç ms beklemeniz ve belirtilen zamana kadar yeni bir tıklama olup olmadığını kontrol etmeniz gerekir. Bu şekilde, bunun sadece basit mi yoksa çift tıklama mı olduğunu öğrenebilirsiniz. - Adrien Schuler


Cevaplar:


İlk tıklamadan sonra başka bir tıklama olup olmadığını kontrol etmek için zaman aşımı kullanmanız gerekir.

İşte hile:

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

Kullanımı:

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

DÜZENLE:

Aşağıda belirtildiği gibi, yerel kullanmayı tercih edin dblclick Etkinlik: http://www.quirksmode.org/dom/events/click.html

Ya da jQuery tarafından sağlanan: http://api.jquery.com/dblclick/


45
2018-03-31 08:30



Bu genel olarak güzel bir şekilde çalışabilir, ancak tıklamalar arasında izin verilen gecikme süresi (iki tıklama çift tıklama olarak yorumlanır) sistem yapılandırmasına göre farklılık göstermiyor olabilir mi? Muhtemelen güvenmek daha güvenlidir. dblclick Etkinlik - Jon z
Evet bence haklısın. dblclick kesinlikle bugün gitmenin yolu. jQuery ayrıca bu olayı işler: api.jquery.com/dblclick - Adrien Schuler
@AdrienSchuler - Dokümandan bağlandığınız: İşleyicileri, aynı öğe için hem tıklama hem de dblclick olaylarına bağlamak tavsiye edilmez. Soru sahip olmakla ilgili her ikisi de. - Álvaro González
Güzel, teşekkürler. - huesforalice


Davranışı dblclick olay açıklanır Alay modu.

İçin etkinliklerin sırası dblclick geçerli:

  1. mousedown
  2. mouseup
  3. tık
  4. mousedown
  5. mouseup
  6. tık
  7. DblClick

Bu kuralın bir istisnası, özel siparişleri ile Internet Explorer'dır (tabii ki):

  1. mousedown
  2. mouseup
  3. tık
  4. mouseup
  5. DblClick

Gördüğünüz gibi, her iki etkinliğin aynı öğede birlikte dinlenmesi, sizin click işleyicisi.


68
2018-04-01 09:30



emin değil dblclick güvenilir bile ... eğer bir kez tıklarsam ... bekle bir ya da iki, sonra tekrar tıkla, ben bir dblclick ikinci tıklamadaki etkinlik! - Michael


Basit bir işlev. JQuery veya başka bir çerçeve gerekli değildir. İşlevlerinizi parametre olarak geçirin

<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



Bunun en iyi cevap olması gerektiğini düşünüyorum. Ancak, Windows IE8 üzerinde çalışmak için zaman aşımını 200'e düşürmek zorunda kaldım, ancak bu değer işletim sistemi ve kullanıcı bağımlısı olabilir. Ayrıca, çift tıklama kaydedilmişse, tıklamanın yürütülmesini iptal edebilmek için zamanlayıcı referansını da kaydetmiştir. - xpereta
Bu kod parçası için teşekkür ederiz, chrome ve firefox üzerinde harika çalışıyor (ancak kromun dbl ve single ile çalışmasına gerek yok). - victor
kullanma el.dataset.dblclick Bunu şimdi yapmanın daha güzel bir yolu olurdu. - WORMSS


Korkarım ki davranış tarayıcıya bağlı:

İşleyicileri bağlamak için tavsiye edilmez   hem tıklama hem de dblclick olayları için   aynı element. Sırası   tetiklenen olaylar tarayıcıdan   iki alıcı ile tarayıcıya   dblclick'ten önceki etkinlikleri tıklayın ve   diğerleri sadece bir tane. Çift tıklama   duyarlılık (arasındaki maksimum zaman   çift ​​olarak algılanan tıklamalar   tıklayın) işletim sistemine göre değişebilir   ve tarayıcı ve genellikle   kullanıcı tarafından yapılandırılabilir.

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

Kodunuzu Firefox'ta çalıştırmak için click() İşleyici, ikinci kez tıklatmanızı önler. Bu uyarıyı kaldırırsanız, her iki olayı da alırsınız.


12
2018-03-31 08:30





İki kez tıklamak için (iki kere tıkla) önce bir kez tıklamanız gerekir. click() İşleyici ilk tıkladığınız anda tetiklenir ve uyarı başladığında ikinci ateşleme yapma şansınız yoktur. dblclick() işleyicisi.

İşverenlerinizi, başka bir şey yapmak için değiştirin alert() ve davranışı göreceksiniz. (belki öğenin arka plan rengini değiştirir):

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

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

8
2018-03-31 08:29



İyi nokta - uyarı yürütmeyi durdurur. - Jon z


Bu cevapların hiçbiri ihtiyaçlarınızı karşılamıyordu. Bu yüzden @AdrienSchuler tarafından yayınlanan genden ilham alan bir çözüm oluşturdum. Bu çözümü yalnızca tek bir tıklama bağlamak istediğinizde ve bir öğeye çift tıklattığınızda kullanın. Aksi takdirde yerel kullanmayı öneriyorum click ve dblclick dinleyiciler.

Bunlar farklılıklar:

  • Vanillajs, Bağımlılık yok
  • Beklemeyin setTimeout click veya doubleclick işleyicisini işlemek için
  • Çift tıklandığında, önce tıklama işleyicisini tetikler ve ardından doubleclick işleyicisi

JavaScript:

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

Kullanımı:

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

Aşağıda bir jsfiddle kullanımı, jQuery butonu kabul edilen cevabın davranışıdır.

jsfiddle


5
2017-10-10 09:59



Yukarıdaki kod ve kemanın 'Vanilla' versiyonu işe yaramıyor ... işte sabit bir Vanilya versiyonu: jsfiddle.net/jeum/cpbwx5vr/19 - jeum
@jeum Her tarayıcıda hala benim için hile yapar. Ne "çalışmıyor" ve ne bekliyorsunuz? Senin versiyonunun niyet ettiğim şeyi yapmıyor gibi görünüyor. - A1rPun
Yumruk Benim sürümümü değiştirdim (kaldırılmış çift kapatma), lütfen yeni olanı deneyin: jsfiddle.net/jeum/cpbwx5vr/20 Kemanınızdaki sorun (Vanilla sürümü), çift tıklamanın tek işleyiciyi tetiklemesidir: bu benim için tek + çiftini alır. - jeum
@jeum Bu bir hata verir. Evet cevabım kabul edilen ve diğer cevaplardan farklıdır ve ben de bu farkı bu satırda belirtiyorum: Bir tıklama, sonra bir doubleclick (doğrudan doubleclick gitmeyin) - A1rPun
Evet hatası yine, bu sürüm ana soruyu yanıtlıyor: jsfiddle.net/jeum/cpbwx5vr/21. Şimdi sürümünüzle ilgili (anlayamadığım doğru), 'jQuery' nin kemanınızda ne istediğinizi gerçekleştirmediğini fark ettiniz mi? - jeum


Dayalı basit bir Vanilya çözüm A1rPun cevapla onun keman jQuery çözümü için ve her ikisi de Bu).

Kullanıcı tek tıklatıldığında tek tıklatma işleyicisi tetiklemeyecek gibi görünüyor, tek tıklama işleyicisi mutlaka bir gecikme sonrasında tetikleniyor ...

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



Tek tıkla ateşlemeyi istemiyorsanız gerçekten en iyi alternatif budur :) - A1rPun


İşte, rastgele sayıdaki olaylar için jeum'un kodunun bir alternatifi:

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

Bunun için bir cytoscape.js Uygulamanın.


3
2018-05-04 16:43



Güzel! Ayrıca döndürülen fonksiyonun içinde yeni bir değişken belirtebiliriz ve this, tıklanan elemandır ve işleyiciye iletir (yanında e veya bunun yerine). - HeyJude


Mükemmel jQuery Sparkle eklentisini kullanın. Eklenti size ilk ve son tıklamayı algılama seçeneği sunar. Tıklama ve dblclick arasında farklılaşmak için, ilk tıklamayla başka bir tıklamanın daha sonra izlendiğini algılayarak kullanabilirsiniz.

Bir göz atın http://balupton.com/sandbox/jquery-sparkle/demo/


2
2018-03-31 08:44





Bir çift tıklamadan tek tıklamayı ayırt etmek için özel bir 'singleclick' olayı kullanmanızı sağlayan basit bir jQuery eklentisi yazdım:

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





Ben jquery (ve diğer 90-140k libs) önlemek için, ve belirtilen tarayıcılar ilk olarak onclick işlemek gibi, bu yüzden benim yarattığım bir web sitesinde yaptığım şey (bu örnek aynı zamanda tıklatılmış konum yerel x y almak kapsar)

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 ...
}

umarım yardımcı olur


0
2017-11-19 20:10



Cevabınızı anlamak için oyununuzun URL'sinin gerekli değildir. Bu gönderiyi spam girişimi olarak görmemek için kaldırıyorum. - Andrew Barber
tek eksi, 200 sihirli sabittir ve işletim sistemindeki kullanıcının fare ayarlarından büyük ölçüde farklılık gösterebilir - Danubian Sailor