Wie kann man ein Einzelklickereignis und ein Doppelklickereignis unterscheiden?

Ich habe einen einzelnen Knopf in li mit ID "my_id". Ich habe diesem Element zwei jQuery-Ereignisse angehängt

1.

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

2.

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

Aber jedes Mal gibt es mir die single click

Sie müssen eine Zeitüberschreitung 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);
      }
    });
  });
}

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:

Verwenden Sie, wie unten angegeben, lieber das native dblclickEreignis: http://www.quirksmode.org/dom/events/click.html

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

Das Verhalten des dblclickEreignisses wird im Quirksmode erläutert .

Die Reihenfolge der Ereignisse für a dblclicklautet:

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) Internet Explorer mit der benutzerdefinierten Reihenfolge:

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

Wie Sie sehen können, führt das gleichzeitige Abhören beider Ereignisse auf demselben Element zu zusätzlichen Aufrufen Ihres clickHandlers.

Anstatt mehr Ad-hoc-Status und setTimeout zu verwenden, gibt es eine native Eigenschaft namens detail, auf die Sie vom eventObjekt 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

Eine einfache Funktion. Es ist keine Abfrage oder ein anderes Framework 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>

Ich befürchte, dass das Verhalten browserabhängig ist:

Es ist nicht ratsam, Handler für dasselbe Element an die Ereignisse click und dblclick zu binden. Die Reihenfolge der ausgelösten Ereignisse variiert von Browser zu Browser, wobei einige zwei Klickereignisse vor dem dblclick empfangen und andere nur eines. Die Doppelklickempfindlichkeit (maximale Zeit zwischen Klicks, die als Doppelklick erkannt wird) kann je nach Betriebssystem und Browser variieren 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.

Nun, um zu doppelklicken (zweimal klicken), müssen Sie zuerst einmal klicken. Der click()Handler wird bei Ihrem ersten Klick ausgelöst. Da die Warnung angezeigt wird, haben Sie keine Chance, den zweiten Klick auszuführen, um den dblclick()Handler auszulösen.

Ändern Sie Ihre Handler, um etwas anderes als ein zu tun, alert()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')
});

Diese Antwort ist mit der Zeit veraltet. Überprüfen Sie die Lösung von @ kyw.

Ich habe eine Lösung erstellt, die von der von @AdrienSchuler veröffentlichten Zusammenfassung inspiriert ist. 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 des Native clickund der dblclickListener.

Das sind die Unterschiede:

• Vanillajs, keine Abhängigkeiten
• Warten Sie nicht, setTimeoutbis der Klick- oder Doppelklick-Handler fertig ist
• Beim Doppelklicken wird zuerst der Klick-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 jsfiddle, die jQuery-Schaltfläche ist das Verhalten der akzeptierten Antwort.

jsfiddle

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

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

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

Hier ist eine Alternative zu Jeums Code 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.

Wie kann man zwischen Einzelklicks und Doppelklicks auf ein und dasselbe Element unterscheiden?

Wenn Sie sie nicht benötigen , zu mischen, können Sie sich verlassen clickund dblclickund jeder wird gut die Arbeit machen.

Beim Mischen tritt ein Problem auf: Ein dblclickEreignis löst tatsächlich auch ein clickEreignis aus. Sie müssen also feststellen, ob ein einzelner Klick ein "eigenständiger" Einzelklick oder ein Teil eines Doppelklicks ist.

Außerdem: Sie sollten nicht beide clickund dblclickein und dasselbe Element verwenden :

Es ist nicht ratsam, Handler für dasselbe Element an die Ereignisse click und dblclick zu binden. Die Reihenfolge der ausgelösten Ereignisse variiert von Browser zu Browser, wobei einige zwei Klickereignisse vor dem dblclick empfangen und andere nur eines. Die Doppelklickempfindlichkeit (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:

Mit der detailEigenschaft des Ereignisses können Sie die Anzahl der mit dem Ereignis verbundenen Klicks ermitteln . Dies macht Doppelklicks innerhalb clickziemlich einfach zu erkennen.

Das Problem besteht weiterhin darin, einzelne Klicks zu erkennen und festzustellen, ob sie Teil eines Doppelklicks sind oder nicht. Dafür verwenden wir wieder einen Timer und setTimeout.

Wenn wir alles zusammenfassen, ein Datenattribut verwenden (um eine globale Variable zu vermeiden) und ohne die Klicks selbst 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 Barrierefreiheit und Doppelklickgeschwindigkeit:

• Wie Wikipedia es ausdrückt: "Die maximale Verzögerung, die erforderlich ist, damit zwei aufeinanderfolgende Klicks als Doppelklick interpretiert werden, ist nicht standardisiert."
• Keine Möglichkeit, die Doppelklickgeschwindigkeit des Systems im Browser zu erkennen.
• Scheint der Standard ist 500 ms und der Bereich 100-900mm unter Windows ( Quelle )
• Denken Sie an Menschen mit Behinderungen, die in ihren Betriebssystemeinstellungen die Doppelklickgeschwindigkeit auf die langsamste einstellen.
  • Wenn die Doppelklickgeschwindigkeit des Systems langsamer als die oben angegebenen 500 ms ist, werden sowohl das Einzelklick- als auch das Doppelklickverhalten ausgelöst.
  • Verwenden Sie entweder nicht den kombinierten Einzel- und Doppelklick auf ein und dasselbe Element.
  • Oder: Fügen Sie den Optionen eine Einstellung hinzu, um den Wert erhöhen zu können.

Es hat eine Weile gedauert, bis eine zufriedenstellende Lösung gefunden wurde. Ich hoffe, das hilft!

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

Überprüfen Sie es auf http://balupton.com/sandbox/jquery-sparkle/demo/

Ich habe ein einfaches jQuery-Plugin geschrieben, mit dem Sie ein benutzerdefiniertes "Singleclick" -Ereignis 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');
}

Die moderne richtige Antwort ist eine Mischung aus der akzeptierten Antwort und der Lösung von @kyw. Sie benötigen eine Zeitüberschreitung, um diesen ersten Einzelklick zu verhindern, und die event.detailÜberprüfung, um den zweiten Klick zu verhindern.

const button = document.getElementById('button')
let timer
button.addEventListener('click', event => {
  if (event.detail === 1) {
    timer = setTimeout(() => {
      console.log('click')
    }, 200)
  }
})
button.addEventListener('dblclick', event => {
  clearTimeout(timer)
  console.log('dblclick')
})

<button id="button">Click me</button>

Ich mag es, jquery (und andere 90-140k-Bibliotheken) zu vermeiden, und wie bereits erwähnt, verarbeiten Browser zuerst onclick. Deshalb habe ich Folgendes auf einer von mir erstellten Website getan (in diesem Beispiel wird auch das Abrufen eines angeklickten Speicherorts lokal xy behandelt).

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

Basierend auf der Antwort von Adrien Schuler (vielen Dank !!!) für Datatables.net und für viele Zwecke ist hier eine Modifikation:

Funktion

/**
 * For handle click and single click in child's objects
 * @param {any} selector Parents selector, like 'tr'
 * @param {any} single_click_callback Callback for single click
 * @param {any} double_click_callback Callback for dblclick
 * @param {any} timeout Timeout, optional, 300 by default
 */
jQuery.fn.single_double_click = function (selector, single_click_callback, double_click_callback, timeout) {
    return this.each(function () {
        let clicks = 0;
        jQuery(this).on('click', selector, function (event) {
            let self = this;
            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);
            }
        });
    });
}

Verwenden

$("#MyTableId").single_double_click('tr',
            function () {   //  Click
                let row = MyTable.row(this);
                let id = row.id();
                let data = row.data();
                console.log("Click in "+id+" "+data);
            },
            function () {   //  DBLClick
                let row = MyTable.row(this);
                let id = row.id();
                let data = row.data();
                console.log("DBLClick in "+id+" "+data);
            }
        );

das hat bei mir funktioniert -

var clicked=0;
function chkBtnClcked(evnt) {
    clicked++;
    // wait to see if dblclick
    if (clicked===1) {
        setTimeout(function() {
            clicked=0;
            .
            .
        }, 300); // test for another click within 300ms
    }
    if (clicked===2) {
        stopTimer=setInterval(function() {
            clicked=0;
            .
            .
        }, 30*1000); // refresh every 30 seconds
    }
}

Verwendung-

<div id="cloneimages" style="position: fixed;" onclick="chkBtnClcked(evnt)"  title="Click for next pic; double-click for slide show"></div>

Veröffentlichen Sie einfach die native HTML-Antwort für den Fall, dass es einfach und HTML sein muss.

<p ondblclick="myFunction()" id = 'id'>Double-click me</p>

Dies hat natürlich native Jquery-Optionen. dh ... $('#id').attr('ondblclick',function(){...})oder, wie bereits erwähnt,$('#id').dblclick(function(){...});

Ich weiß, dass dies alt ist, aber unten ist ein JS-Beispiel eines einfachen Schleifenzählers mit einem einzelnen Timer, um einen einzelnen vs Doppelklick zu bestimmen. Hoffentlich hilft das jemandem.

var count = 0;
var ele = document.getElementById("my_id");
ele.addEventListener('click', handleSingleDoubleClick, false); 

function handleSingleDoubleClick()
{
  if(!count) setTimeout(TimerFcn, 400); // 400 ms click delay
  count += 1;
}
function TimerFcn() 
{
  if(count > 1) console.log('you double clicked!')
  else console.log('you single clicked')
  count = 0;
}