Unterschied zwischen mousedown und click in jquery

Lesezeit: 4 Minuten

Ich lerne Ereignisse in jquery. Bei der Umsetzung bin ich auf einen Zweifel gestoßen. Was ist der Unterschied zwischen dem Ereignis mousedown() und click()? Und welches Ereignis sollte ich bei welcher Bedingung verwenden?

Beispiel: Beide Ereignisse führen dieselbe Aufgabe im folgenden Code aus:

$("#p1").mousedown(function(){
  alert("Mouse down over p1!");
});


$("#p1").click(function(){
  alert("Mouse down over p1!");
});

Beide verhalten sich gleich. Kann jemand den Unterschied verdeutlichen. Wenn gleich, was sollte ich bevorzugen?.

  • Betrachten Sie den Fall von Dragging und du bekommst deine antwort.

    – Gupta.Swap

    1. Oktober 2013 um 6:54 Uhr

Benutzer-Avatar
pablofiumara

onMouseDown wird ausgelöst, wenn entweder links oder rechts (oder in der Mitte) gedrückt wird. Ähnlich, onMouseUp wird ausgelöst, wenn eine beliebige Taste losgelassen wird. onMouseDown wird ausgelöst, selbst wenn die Maus auf das Objekt geklickt und dann davon wegbewegt wird, während onMouseUp wird ausgelöst, wenn Sie die Taste an einer anderen Stelle klicken und gedrückt halten und dann über dem Objekt loslassen.

onClick wird nur ausgelöst, wenn die linke Maustaste auf demselben Objekt gedrückt und losgelassen wird. Falls Sie sich für die Reihenfolge interessieren, wenn für dasselbe Objekt alle 3 Ereignisse festgelegt sind, ist dies der Fall onMouseDown, onMouseUpdann onClick. Jedes Event sollte jedoch nur einmal ausgelöst werden.

Einzelheiten:

http://api.jquery.com/click/
http://api.jquery.com/mouseup/
http://api.jquery.com/mousedown/

Quelle geschrieben von Anton Baksheiev

  • Diese URLs beziehen sich auf jQuery, während onClick, onMouseUp und OnMouseDown sind eigentlich keine jQuery-Events, sondern JavaScript-Events. Ich denke, es ist besser zu verlinken eine w3c-Spezifikation in diesem Fall. (Auf der verlinkten Seite etwas nach unten scrollen)

    – Mathijs Fleetstra

    1. Oktober 2013 um 7:01 Uhr


  • Aber wenn wir sowohl Click- als auch Mousedown-Ereignisse an dasselbe Element binden. Das mousedown-Ereignis wird immer ausgelöst, nicht der Klick. Warum passiert das so. Was machen wir, wenn wir sowohl die Maustaste gedrückt als auch klicken müssen? siehe diese jsfiddle jsfiddle.net/a74k92dd

    – Arwin

    20. Oktober 2014 um 11:21 Uhr

EIN mousedown Das Ereignis wird ausgelöst, wenn die Maustaste gedrückt wird, aber bevor sie losgelassen wird.

Das click Ereignis wird nach ausgelöst mousedown und mouseup Veranstaltungen.

  • Sie sollten auch erwähnen, dass das Click-Ereignis ausgelöst wird, wenn das Mousedown- und Mouseup-Ereignis auf demselben Element auftritt.

    – Akansch

    17. März 2017 um 10:01 Uhr

$(element).click() Feuer, wenn Sie Drücken Sie Maustaste und dann freigeben es.

$(element).mousedown() Feuer, dann drücken Sie die Maustaste.

Versuchen Sie, die angeklickte Schaltfläche über dieser Schaltfläche zu halten, und lassen Sie sie dann hier los: http://jsfiddle.net/n9rJ9/

Sie nicht. Sie könnten das glauben, da Sie beide Event-Handler an dasselbe Element gebunden haben, sodass mousedown immer ausgelöst wird, bevor das Click-Event eintritt.

Wenn Sie sie an verschiedene Elemente binden, werden Sie sehen, dass mousdown immer auf einen Tastendruck (jede Maustaste) ohne Loslassen feuert und klicken wird feuern, nachdem Sie die Maustaste der linken (primären) Seite losgelassen haben.

Siehe diese kleine jsfiddle: http://jsfiddle.net/wBfbm/

$("#p1").mousedown(function(){
  alert("Mouse down over p1!");
});


$("#p2").click(function(){
  alert("Mouse down over p1!");
});

onMouseDown wird ausgelöst, wenn entweder links oder rechts (oder in der Mitte) gedrückt wird.

onClick wird nur ausgelöst, wenn die linke Maustaste auf demselben Objekt gedrückt und losgelassen wird.

onmousedown + onmouseup = onclick (Klickereignis);

** actions **                             ** event **

mouse press/down                          onmousedown
mouse release/up                          onmouseup
mouse press/down + mouse release/up       onclick
Key Enter/space press                     onclick  

Benutzer-Avatar
Gaurav Agrawal

Versuchen Sie es auf diese Weise. Weil event.stopPropagation das Click-Event-Event nicht stoppt, wenn die Maustaste gedrückt ist. Mouse-down- und Click-Ereignisse sind nicht miteinander verbunden.

 var mousedDownFired = false;

  $("#id").mousedown(function(event){
      mousedDownFired =true;
      //code
  });

  $("#id").click(function(event){
     if(mousedDownFired)
      {
         mousedDownFired = false;
         return;
      }
      //code
 });

Aktualisiert:

NEIN . Mausereignisse werden auf diese Weise ausgelöst

1) Maus runter

2) Klicken Sie

3) Maus hoch

Wenn die Maustaste gedrückt wird, wird das Flag aktiviert, nachdem das Mausklick-Ereignis ausgelöst wird. Bei diesem Klickereignis wird die Flag-Variable deaktiviert. Dies funktioniert als zyklischer Weg. zwei Mouse-Down oder zwei Klicks werden nicht berücksichtigt

  • Nun, das ist einfach falsch. Sie müssen diesen Beitrag aktualisieren, damit er die richtigen Informationen enthält. Sie können an diesem Codepen deutlich sehen, dass die Reihenfolge Mousedown, Mouseup, Click lautet: codepen.io/mudassir0909/pen/eIHqB

    – Kamelkew

    18. Februar 2017 um 1:29 Uhr


  • Die Reihenfolge kann je nach verwendetem Browser variieren. Browserübergreifend habe ich es nicht getestet. In meinen Beobachtungen von Ereignissen, die in Chrome behandelt werden, werden die Ereignisse jedoch in der Reihenfolge Mousedown, Mouseup und dann Click ausgelöst.

    – BrightIntelDusk

    19. Mai 2017 um 23:03 Uhr

  • Alle Browser werden in der folgenden Reihenfolge ausgelöst: Mousedown, Mouseup, Klick, nicht in der in dieser Antwort angegebenen Reihenfolge.

    – JonBrave

    30. Juni 2017 um 15:15 Uhr

1262640cookie-checkUnterschied zwischen mousedown und click in jquery

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy