it-swarm.com.de

wie unterscheidet man Single-Click-Events und Double-Click-Events?

Ich habe eine einzige Schaltfläche in li mit der ID "my_id". Ich habe two jquery Ereignisse mit diesem Element verbunden

1.

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

2.

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

Aber es gibt mir jedes Mal den single click

87
user426795

Sie müssen ein Timeout verwenden, um zu überprüfen, ob nach dem ersten Klick ein weiterer 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);
      }
    });
  });
}

Verwendungszweck:

$("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 Verwendung des nativen dblclick-Ereignisses: http://www.quirksmode.org/dom/events/click.html

Oder das von jQuery bereitgestellte: http://api.jquery.com/dblclick/

53
Adrien Schuler

Das Verhalten des dblclick-Ereignisses wird unter Quirksmode erklärt.

Die Reihenfolge der Ereignisse für eine dblclick lautet:

  1. maus nach unten
  2. mouseup
  3. klicken
  4. maus nach unten
  5. mouseup
  6. klicken
  7. dblclick

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

  1. maus nach unten
  2. mouseup
  3. klicken
  4. mouseup
  5. dblclick

Wie Sie sehen, führt das gemeinsame Hören beider Ereignisse für dasselbe Element zu zusätzlichen Aufrufen Ihres click-Handlers.

71
Ryan

Eine einfache Funktion. Es ist keine Jquery oder ein anderer Rahmen 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>
20
Renzo Ciot

Ich befürchte, dass das Verhalten vom Browser abhängt:

Es ist nicht ratsam, Handler an .__ zu binden. Sowohl das Click- als auch das Dblclick-Ereignis für das gleiche Element. Die Sequenz von ausgelöste Ereignisse variieren je nach Browser zum Browser, wobei einige zwei Klicken Sie auf Events vor dem Dblclick und andere nur eine. Doppelklick Die Empfindlichkeit (maximale Zeit zwischen Klicks, die als doppelter Klick erkannt wird) kann je nach Betriebssystem unterschiedlich sein und Browser und ist häufig vom Benutzer konfigurierbar.

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

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

13

Nun, um doppelt zu klicken (zweimal klicken), müssen Sie zuerst einmal klicken. Der click()-Handler wird beim ersten Klick ausgelöst. Da die Warnmeldung angezeigt wird, haben Sie keine Chance, den zweiten Klick zum Auslösen des dblclick()-Handlers auszuführen.

Ändern Sie Ihre Handler, um etwas anderes als eine alert() zu tun, und Sie werden das Verhalten sehen. (Ändern Sie möglicherweise die Hintergrundfarbe des Elements):

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

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

Keine dieser Antworten erfüllte meine Bedürfnisse, daher habe ich eine Lösung entwickelt, die von der von @AdrienSchuler geposteten Gist 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 Verwendung der nativen click- und dblclick-Listener.

Das sind die Unterschiede:

  • Vanillajs, keine Abhängigkeiten
  • Warten Sie nicht auf die Variable setTimeout, um den Click- oder Doubleclick-Handler zu verarbeiten
  • Beim Doppelklick 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;
        }
    };
}

Verwendungszweck:

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

Im Folgenden wird die Verwendung in einem jsfiddle beschrieben. Die Schaltfläche jQuery ist das Verhalten der akzeptierten Antwort.

jsfiddle

6
A1rPun

Eine weitere einfache Vanilla-Lösung, die auf der Antwort A1rPun basiert (siehe seine Geige für die jQuery-Lösung, und beide sind in hier ).

Es scheint, dass der Single-Click-Handler notwendigerweise nach einer Verzögerung ausgelöst wird, um NICHT einen Single-Click-Handler auszulösen, wenn der Benutzer doppelt klickt.

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

Hier ist eine Alternative des Jeum-Codes 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));

Benötigt dies für eine cytoscape.js app.

4
nex

Anstatt mehr Ad-hoc-Zustände und setTimeout zu verwenden, stellt sich heraus, dass es eine native Eigenschaft namens detail gibt, auf die Sie vom event-Objekt aus zugreifen können!

element.onclick = event => {
   if (event.detail === 1) {
     // it was a single click
   } else if (event.detail === 2) {
     // it was a double click
   }
};

Moderne Browser und sogar IE-9 unterstützen es :) 

Quelle: https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail

3
kyw

Ich habe ein einfaches jQuery-Plugin geschrieben, mit dem Sie ein benutzerdefiniertes Einzelklickereignis verwenden können, um einen Einzelklick von einem Doppelklick zu unterscheiden:

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');
}
3
omriyariv

Verwenden Sie das hervorragende Plugin jQuery Sparkle. Das Plugin bietet Ihnen die Möglichkeit, den ersten und letzten Klick zu erkennen. Sie können es verwenden, um zwischen Klick und Dblclick zu unterscheiden, indem Sie feststellen, ob ein weiterer Klick vom ersten Klick gefolgt wurde. 

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

3
Hussein

Wie unterscheidet man Einzelklicks und Doppelklicks auf ein und dasselbe Element?

Wenn Sie sie nicht mischen müssen, können Sie sich auf click und dblclick verlassen, und jeder erledigt die Aufgabe.

Ein Problem tritt auf, wenn Sie versuchen, sie zu mischen: a dblclick -Ereignis löst auch ein click -Ereignis aus. Sie müssen also feststellen, ob ein einzelner Klick ein "Stand-Alone" -Einzelklick oder ein Teil eines Doppelklicks ist .

Zusätzlich: Sie sollten nicht click und dblclick für ein und dasselbe Element verwenden:

Es ist nicht ratsam, Handler an die Click- und Dblclick-Ereignisse für dasselbe Element zu binden. Die Reihenfolge der ausgelösten Ereignisse ist von Browser zu Browser unterschiedlich. Einige davon erhalten vor dem dblclick zwei Klickereignisse und andere nur ein Ereignis. Die Empfindlichkeit des Doppelklicks (maximale Zeit zwischen Klicks, die als Doppelklick erkannt wird) kann je nach Betriebssystem und Browser variieren und ist häufig vom Benutzer konfigurierbar.
Quelle: https://api.jquery.com/dblclick/

Nun zu den guten Nachrichten:

Sie können die detail -Eigenschaft des Ereignisses verwenden, um die Anzahl der Klicks zu ermitteln, die sich auf das Ereignis beziehen. Dadurch sind Doppelklicks in click relativ einfach zu erkennen.

Es bleibt das Problem, einzelne Klicks zu erkennen und ob sie Teil eines Doppelklicks sind oder nicht. Dafür verwenden wir wieder einen Timer und setTimeout.

Alles zusammen mit einem Datenattribut (um eine globale Variable zu vermeiden) und ohne selbst Klicks zählen zu müssen, erhalten wir:

HTML:

<div class="clickit" style="font-size: 200%; margin: 2em; padding: 0.25em; background: orange;">Double click me</div>

<div id="log" style="background: #efefef;"></div>

JavaScript:

<script>
var clickTimeoutID;
$( document ).ready(function() {

    $( '.clickit' ).click( function( event ) {

        if ( event.originalEvent.detail === 1 ) {
            $( '#log' ).append( '(Event:) Single click event received.<br>' );

            /** Is this a true single click or it it a single click that's part of a double click?
             * The only way to find out is to wait it for either a specific amount of time or the `dblclick` event.
             **/
            clickTimeoutID = window.setTimeout(
                    function() {
                        $( '#log' ).append( 'USER BEHAVIOR: Single click detected.<br><br>' );
                    },
                    500 // how much time users have to perform the second click in a double click -- see accessibility note below.
                );

        } else if ( event.originalEvent.detail === 2 ) {
            $( '#log' ).append( '(Event:) Double click event received.<br>' );
            $( '#log' ).append( 'USER BEHAVIOR: Double click detected.<br>' );
            window.clearTimeout( clickTimeoutID ); // it's a dblclick, so cancel the single click behavior.
        } // triple, quadruple, etc. clicks are ignored.

    });

});
</script>

Demo:

JSfiddle


Hinweise zur Erreichbarkeit und Doppelklickgeschwindigkeit:

  • Wie Wikipedia sagt: "Die maximale Verzögerung, die erforderlich ist, um zwei aufeinanderfolgende Klicks als Doppelklick zu interpretieren, ist nicht standardisiert."
  • Keine Möglichkeit, die Doppelklickgeschwindigkeit des Systems im Browser zu ermitteln.
  • Scheint der Standard ist 500 ms und der Bereich 100-900 mm unter Windows ( source )
  • Stellen Sie sich Menschen mit Behinderungen vor, die in ihren Betriebssystemeinstellungen die Doppelklickgeschwindigkeit auf die langsamste Stufe setzen .
    • Wenn die Doppelklickgeschwindigkeit des Systems langsamer ist als unsere Standardeinstellung von 500 ms, werden sowohl das Doppelklickverhalten als auch das Doppelklickverhalten ausgelöst.
    • Verwenden Sie entweder kein kombiniertes Einzel- und Doppelklick auf ein und dasselbe Element.
    • Oder: Fügen Sie in den Optionen eine Einstellung hinzu, um den Wert erhöhen zu können.

Es hat eine Weile gedauert, eine zufriedenstellende Lösung zu finden, ich hoffe, das hilft!

0

Ich mag es, Jquery (und andere 90-140k-Bibliotheken) zu vermeiden, und wie bereits erwähnt, behandeln Browser zuerst den Befehl "onclick";

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

hoffentlich hilft das

0
dako