Frage Wie unterscheidet man Einzelklick-Ereignis und Doppelklick-Ereignis?


Ich habe einen einzigen Knopf in li mit ID "my_id". ich habe angehängt two jquery Ereignisse mit diesem Element

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

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

Aber jedes Mal gibt es mir das single click


76
2018-03-31 08:24


Ursprung


Antworten:


Sie müssen ein Timeout verwenden, um zu prüfen, ob nach dem ersten Klick noch ein Klick erfolgt.

Hier ist der Trick:

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

Verwendung:

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

BEARBEITEN:

Wie unten angegeben, bevorzugen Sie die native dblclick Veranstaltung: http://www.quirksmode.org/dom/events/click.html

Oder die von jQuery zur Verfügung gestellte: http://api.jquery.com/dblclick/


44
2018-03-31 08:30



Das Verhalten der dblclick Ereignis wird erklärt bei Quirkmodus.

Die Reihenfolge der Ereignisse für a dblclick ist:

  1. Maus nach unten
  2. Mausklick
  3. klicken
  4. Maus nach unten
  5. Mausklick
  6. klicken
  7. dblclick

Die einzige Ausnahme von dieser Regel ist (natürlich) der Internet Explorer mit der benutzerdefinierten Reihenfolge:

  1. Maus nach unten
  2. Mausklick
  3. klicken
  4. Mausklick
  5. dblclick

Wie Sie sehen können, führt das gleichzeitige Hören beider Ereignisse auf demselben Element zu zusätzlichen Aufrufen Ihrer click Handler.


67
2018-04-01 09:30



Eine einfache Funktion. Keine jquery oder andere Rahmenbedingungen sind erforderlich. Übergeben Sie Ihre Funktionen als Parameter

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

16
2018-04-16 09:16



Ich habe Angst, dass das Verhalten Browser-abhängig ist:

Es ist nicht ratsam, Handler zu binden   Sowohl das Click- als auch das Dblclick-Ereignis für   das gleiche Element. Die Sequenz von   Ereignisse ausgelöst variiert von Browser   zum Browser, wobei einige zwei empfangen   click Ereignisse vor dem dblclick und   andere nur eins. Doppelklick   Empfindlichkeit (maximale Zeit zwischen   Klicks, die als Double erkannt werden   Klick) kann je nach Betriebssystem variieren   und Browser, und ist oft   Benutzer konfigurierbar.

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

Wenn Sie Ihren Code in Firefox ausführen, wird der Alert () in der click() Handler verhindert, dass Sie ein zweites Mal klicken. Wenn Sie eine solche Warnung entfernen, erhalten Sie beide Ereignisse.


12
2018-03-31 08:30



Nun, um doppelt zu klicken (zweimal klicken) müssen Sie zuerst einmal klicken. Das click() Der Handler feuert bei Ihrem ersten Klick und da die Warnung auftaucht, haben Sie keine Chance, den zweiten Klick zu machen, um die dblclick() Handler.

Ändern Sie Ihre Handler, um etwas anderes als ein zu tun alert() und du wirst das Verhalten sehen. (Vielleicht ändern Sie die Hintergrundfarbe des Elements):

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

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

8
2018-03-31 08:29



Keine dieser Antworten hat meine Bedürfnisse befriedigt, daher habe ich eine Lösung erstellt, die von der @AdrienSchuler-Seite inspiriert wurde. Verwenden Sie diese Lösung nur, wenn Sie einen einzelnen Klick UND einen Doppelklick an ein Element binden möchten. Ansonsten empfehle ich die native click und dblclick Zuhörer.

Dies sind die Unterschiede:

  • Vanillajs, keine Abhängigkeiten
  • Warte nicht auf die setTimeout um den Klick- oder Doppelklick-Handler zu handhaben
  • Wenn Sie darauf doppelklicken, wird zuerst der Click-Handler und dann der Doppelklick-Handler ausgelöst

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

Verwendung:

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

Unten ist die Verwendung in einer Datei, die jQuery-Schaltfläche ist das Verhalten der angenommenen Antwort.

jsfiddle


5
2017-10-10 09:59



Eine andere einfache Vanille - Lösung basiert auf der A1rPun antwort (see seine Geige für die jQuery-Lösung, und beide sind in dieses).

Es scheint so, als würde der Single-Click-Handler bei einer Doppelklick-Aktion des Users notwendigerweise mit einer einzigen Klick-Prozedur ausgelöst werden.

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



Hier ist eine Alternative zum Code von jeum für eine beliebige Anzahl von Ereignissen:

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

Brauchte dies für eine cytoscape.js App


3
2018-05-04 16:43



Verwenden Sie das ausgezeichnete jQuery Sparkle-Plugin. Das Plugin gibt Ihnen die Möglichkeit, den ersten und letzten Klick zu erkennen. Sie können damit zwischen click und dblclick unterscheiden, indem Sie erkennen, ob auf einen weiteren Klick der erste Klick folgte.

Schau es dir an http://balupton.com/sandbox/jquery-sparkle/demo/


2
2018-03-31 08:44