Pytanie jak rozróżnić zdarzenie pojedynczego kliknięcia i zdarzenie z podwójnym kliknięciem?


Mam pojedynczy przycisk w li o identyfikatorze "my_id". dołączyłem two jquery wydarzenia z tym elementem

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

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

Ale za każdym razem daje mi to single click


76
2018-03-31 08:24


pochodzenie


Pojedyncze kliknięcie zawsze będzie musiało wystrzelić, nie da się ustalić, czy podwójne kliknięcie ma nastąpić, chyba że faktycznie nastąpi w określonym czasie podwójnego kliknięcia. - Pieter Germishuys
To jest możliwe, sprawdź moją odpowiedź. Musisz poczekać kilka ms po pierwszym kliknięciu i sprawdzić, czy pojawi się nowe kliknięcie, aż do określonego czasu. W ten sposób będziesz wiedzieć, czy to tylko proste czy podwójne kliknięcie. - Adrien Schuler


Odpowiedzi:


Musisz użyć limitu czasu, aby sprawdzić, czy po pierwszym kliknięciu jest inne kliknięcie.

Oto sztuczka:

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

Stosowanie:

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

EDYTOWAĆ:

Jak podano poniżej, preferuj użycie natywnego dblclick zdarzenie: http://www.quirksmode.org/dom/events/click.html

Lub ten dostarczony przez jQuery: http://api.jquery.com/dblclick/


45
2018-03-31 08:30



Może wydawać się, że działa to ogólnie przyjemnie, ale czy opóźnienie między kliknięciami (dwa kliknięcia nie są interpretowane jako podwójne kliknięcie) różni się w zależności od konfiguracji systemu? Prawdopodobnie bezpieczniej jest polegać na dblclick zdarzenie - Jon z
Tak, myślę, że masz rację, dblclick jest zdecydowanie dzisiaj. jQuery obsługuje również to wydarzenie: api.jquery.com/dblclick - Adrien Schuler
@AdrienSchuler - Z dokumentu, który łączysz: Niewłaściwe jest wiązanie procedur obsługi obu zdarzeń click i dblclick dla tego samego elementu. Pytanie dotyczy posiadania obie. - Álvaro González
Niezły sedno, dzięki. - huesforalice


Zachowanie dblclick wydarzenie wyjaśnione jest na stronie Tryb Quirksmode.

Kolejność zdarzeń dla dblclick jest:

  1. mousedown
  2. mouseup
  3. Kliknij
  4. mousedown
  5. mouseup
  6. Kliknij
  7. dblclick

Jedynym wyjątkiem od tej reguły jest (oczywiście) Internet Explorer z ich niestandardową kolejnością:

  1. mousedown
  2. mouseup
  3. Kliknij
  4. mouseup
  5. dblclick

Jak widać, słuchanie obu wydarzeń razem na tym samym elemencie spowoduje dodatkowe połączenia z Twoim click treser.


68
2018-04-01 09:30



niepewny dblclick jest nawet niezawodny ... jeśli kliknę raz ... poczekaj sekundę lub dwie, a następnie kliknij ponownie, otrzymuję dblclick wydarzenie na drugim kliknięciu! - Michael


Prosta funkcja. Nie jest wymagany jQuery ani inny framework. Przekaż swoje funkcje jako parametry

<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



Myślę, że to powinna być najlepsza odpowiedź. Musiałem jednak ograniczyć limit czasu do 200, aby działał w systemie Windows IE8, ale ta wartość może zależeć od systemu operacyjnego i użytkownika. Zapisano również odwołanie do zegara, aby móc anulować wykonanie kliknięcia, jeśli zarejestrowane zostanie podwójne kliknięcie. - xpereta
Dziękuję za ten fragment kodu, działa świetnie na chrome i firefoxie (chociaż chrome nie potrzebuje tego hacka do pracy z dbl i single). - victor
za pomocą el.dataset.dblclick Byłby to lepszy sposób na zrobienie tego teraz. - WORMSS


Obawiam się, że zachowanie zależy od przeglądarki:

Niewłaściwe jest wiązanie procedur obsługi z   zarówno zdarzenia click i dblclick dla   ten sam element. Sekwencja   Wyzwolone zdarzenia różnią się w zależności od przeglądarki   do przeglądarki, a niektóre odbierają dwa   kliknij zdarzenia przed dblclick i   inni tylko jeden. Podwójne kliknięcie   czułość (maksymalny czas pomiędzy   kliknięcia wykryte jako podwójne   kliknij) mogą się różnić w zależności od systemu operacyjnego   i przeglądarkę, i często jest   konfigurowalne przez użytkownika.

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

Uruchamianie twojego kodu w Firefoksie, alert () w click() moduł obsługi uniemożliwia ponowne kliknięcie. Jeśli usuniesz taki alert, otrzymasz oba zdarzenia.


12
2018-03-31 08:30





Aby podwójne kliknięcie (dwukrotne kliknięcie) musisz najpierw raz kliknąć. The click() obsługa uruchamia się po pierwszym kliknięciu, a ponieważ pojawia się alert, nie ma szansy na drugie kliknięcie, aby wystrzelić dblclick() treser.

Zmień swoje procedury obsługi, aby zrobić coś innego niż alert() a zobaczysz zachowanie. (może zmienić kolor tła elementu):

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

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

8
2018-03-31 08:29



Dobry punkt - alarm zatrzymuje wykonanie. - Jon z


Żadna z tych odpowiedzi nie zaspokajała moich potrzeb, więc stworzyłem rozwiązanie inspirowane istotą zamieszczoną przez @AdrienSchuler. Użyj tego rozwiązania tylko wtedy, gdy chcesz powiązać pojedyncze kliknięcie I podwójne kliknięcie elementu. W przeciwnym razie zalecam używanie natywnego click i dblclick słuchacze.

Oto różnice:

  • Vanillajs, Brak zależności
  • Nie czekaj na setTimeout do obsługi obsługi kliknięcia lub dwukrotnego kliknięcia
  • Po dwukrotnym kliknięciu najpierw uruchamia moduł obsługi kliknięcia, a następnie moduł obsługi dwukrotnego kliknięcia

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

Stosowanie:

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

Poniżej znajduje się użycie w jsfiddle, przycisk jQuery to zachowanie zaakceptowanej odpowiedzi.

jsfiddle


5
2017-10-10 09:59



Powyższy kod i wersja skrzypiec "Wanilia" nie działają ... tutaj jest poprawiona wersja Vanilla: jsfiddle.net/jeum/cpbwx5vr/19 - jeum
@jeum Wciąż sprawdza się we wszystkich przeglądarkach. Co "nie działa" i czego oczekujesz? Wygląda na to, że twoja wersja nie robi tego, co zamierzałem. - A1rPun
Pięść Zmodyfikowałem swoją wersję (usunięto podwójne zamknięcie), spróbuj nową: jsfiddle.net/jeum/cpbwx5vr/20 Problem z twoją skrzypią (wersja Vanilla) polega na tym, że podwójne kliknięcie wyzwala pojedynczy handler: pobiera dla mnie pojedyncze + podwójne. - jeum
@jeum Ten daje błąd. Tak, moja odpowiedź różni się od akceptowanych i innych odpowiedzi tutaj, a także tę różnicę w tej linii: Uruchom kliknięcie, a następnie kliknij przycisk doubleclick (nie przechodź od razu do przycisku doubleclick) - A1rPun
Tak, błąd ponownie, więc ta wersja odpowiada na główne pytanie: jsfiddle.net/jeum/cpbwx5vr/21. Jeśli chodzi o twoją wersję (to prawda, że ​​nie zrozumiałem), czy zauważyłeś, że "jQuery" nie osiąga tego, co chcesz w swoim skrzypcach? - jeum


Kolejne proste rozwiązanie Vanilla oparte na A1rPun odpowiedź (patrz jego skrzypce dla rozwiązania jQuery i oba są w ten).

Wygląda na to, że aby NIE wyzwalać obsługi za pomocą jednego kliknięcia, gdy użytkownik kliknie dwukrotnie, obsługa pojedynczego kliknięcia jest koniecznie wyzwalana po opóźnieniu ...

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



To naprawdę najlepsza alternatywa, jeśli nie chcesz, aby pojedyncze kliknięcie zostało uruchomione :) - A1rPun


Oto alternatywa kodu jeum dla dowolnej liczby zdarzeń:

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

Potrzebne to dla cytoscape.js aplikacja.


3
2018-05-04 16:43



Miły! możemy również zadeklarować nową zmienną wewnątrz zwracanej funkcji i przypisać ją this, który jest klikanym elementem i przekazuje go do programu obsługi (obok e lub zamiast tego). - HeyJude


Użyj doskonałej wtyczki jQuery Sparkle. Wtyczka umożliwia wykrycie pierwszego i ostatniego kliknięcia. Za jego pomocą można rozróżnić kliknięcia i dblclick, wykrywając, czy po pierwszym kliknięciu nastąpiło kolejne kliknięcie.

Sprawdź to na http://balupton.com/sandbox/jquery-sparkle/demo/


2
2018-03-31 08:44





Napisałem prostą wtyczkę jQuery, która pozwala użyć niestandardowego zdarzenia "pojedynczego kliknięcia", aby odróżnić jedno kliknięcie od dwukrotnego kliknięcia:

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





Lubię unikać jquery (i innych bibliotek 90-140k), a jak wspomniałem wcześniej, przeglądarki obsługują onclick, więc oto co zrobiłem na stworzonej przeze mnie witrynie (ten przykład obejmuje także kliknięcie lokalizacji local 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 ...
}

mam nadzieję, że pomaga


0
2017-11-19 20:10



Adres URL Twojej gry nie jest konieczny, aby w ogóle zrozumieć twoją odpowiedź. Usuwam go, aby ten post nie był postrzegany jako próba spamu. - Andrew Barber
jedyny minus, 200 to stała magia i może drastycznie różnić się od ustawień myszy użytkownika w systemie operacyjnym - Danubian Sailor