Unterschied zwischen .click () und tatsächlich auf eine Schaltfläche klicken? (javascript / jQuery)

Vor dem Lesen der folgenden, die beschreibt, wie, dieses problem zu umgehen, lassen Sie mich die Antwort mehr voll, weshalb Sie das problem zu beginnen mit:

Modernen Browsern verschiedene Aktionen für links basierend auf Dinge wie die Maus-Schaltfläche, die Sie geklickt haben, mit, ob Sie statt Shift und Strg und Altund so weiter. Als ein Beispiel, in Chrome, wenn Sie mit der mittleren Maustaste einen link statt Links-Klick, der browser öffnet sich automatisch das Fenster in einem neuen tab.

Wenn Sie .click()jQuery, Annahmen zu machen über die "Art und Weise", in der Sie geklickt haben, und Sie bekommen standardmäßig Verhalten - die in Ihrem Fall, ist nicht das richtige Verhalten. Sie müssen angeben, dass die "richtigen" Einstellungen an den browser in form von MouseEvents Einstellungen vornehmen, um das Problem zu beheben.

Nun zu einer kurzen Diskussion von Möglichkeiten, um es zu beheben:

Wenn Sie mit jQuery .click() Ereignis keine Parameter, das ist nicht wirklich "fälscht einen Klick" auf das element in Frage. Statt, nach der jQuery-Dokumentation auf http://api.jquery.com/click/ :

... wenn .click() ohne argument aufgerufen, es ist eine Abkürzung für .trigger("click")

Dies bedeutet, dass, wenn Sie Feuer $('#div1').click() - wenn es keine eigentliche jQuery-handler für die 'click' Veranstaltung, erhalten Sie die Standard-Verarbeitung. So betrachten diese beiden Fälle:

Fall 1:

<a id='myLink' href='/some/link/'>Click me!</a>
<script type='text/javascript'>
    $('#myLink').click();
</script>

In diesem ersten Szenario, das .click() anrufen bringt nichts, weil es keinen handler dafür. Das Ereignis auslöst, aber es gibt nichts, um es zu fangen und zu reagieren - so die a tag, die Standard-Behandlung verwendet wird, und der Benutzer wird genommen, um /some/link/ - und da Sie noch nicht angegeben, welche Maustaste oder anderen Parameter - es ist wirklich Standard.

Fall 2:

<a id='myLink' href='/some/link/'>Click me!</a>
<script type='text/javascript'>
    $('#myLink').bind('click', function (ev) {
        ev.preventDefault();
        ev.stopPropagation();

        alert('you clicked me!');
    }).click();
</script>

In diesem Szenario, da ein click - handler erstellt wurde, wenn der Benutzer auf den link klickt - der ev.preventDefault() und ev.stopPropagation() Anrufe zu stoppen die Standardbehandlungen auftreten, und der Alarm wird ausgelöst.

Zu diesem Zeitpunkt, jedoch, Sie haben eine ev - Objekt repräsentiert die MouseEvents - und man konnte die Einstellungen ändern, wenn gewünscht. Zum Beispiel könnten Sie Folgendes tun:

ev.altKey = true; //Held Alt
ev.button = 1;    //Middle Mouse Button

Diese Einstellungen ändern, wird die Standard-Methode der Umgang mit dem Ereignis.

Alternative, nicht-jQuery-Lösung

Können Sie auch wirklich simulieren ein button-klicken Sie durch die Anpassung des folgenden code.

function fakeClick(event, anchorObj) {
  if (anchorObj.click) {
    anchorObj.click()
  } else if(document.createEvent) {
    if(event.target !== anchorObj) {
      var evt = document.createEvent("MouseEvents"); 
      evt.initMouseEvent("click", true, true, window, 
          0, 0, 0, 0, 0, false, false, false, false, 0, null); 
      var allowDefault = anchorObj.dispatchEvent(evt);
      //you can check allowDefault for false to see if
      //any handler called evt.preventDefault().
      //Firefox will *not* redirect to anchorObj.href
      //for you. However every other browser will.
    }
  }
}

(Für eine vollständige Implementierung finden Sie unter dem original post at: Wie kann ich simulieren, klicken Sie auf einen Anker-tag? - und Blick auf die ausgewählte Antwort)

Dies tatsächlich gefälschte browser zu glauben, dass Sie mit der Maus auf das Anker /Spanne /etc durch den Aufbau der Veranstaltung von Grund auf in der gleichen Weise, dass der browser die Standard-Handler tun - außer, dass Sie diese überschreiben die Einstellungen. Ich weiß nicht vorschlagen, dieser Ansatz jedoch, da es viel mehr anfällig zu brechen auf cross-browser-Anwendung, und Sie müssen, um herauszufinden, was all die Parameter anzeigen.

InformationsquelleAutor der Antwort Troy Alford