Wie simuliere ich einen Mausklick mit JavaScript?

137

Ich kenne die document.form.button.click()Methode. Ich würde jedoch gerne wissen, wie man das onclickEreignis simuliert .

Ich habe diesen Code irgendwo hier auf Stack Overflow gefunden, weiß aber nicht, wie ich ihn verwenden soll :(

function contextMenuClick()
{
    var element= 'button'

    var evt = element.ownerDocument.createEvent('MouseEvents');

    evt.initMouseEvent('contextmenu', true, true,
         element.ownerDocument.defaultView, 1, 0, 0, 0, 0, false,
         false, false, false, 1, null);

    element.dispatchEvent(evt);
}

Wie löse ich ein Mausklickereignis mit JavaScript aus?

Nok Imchen
quelle
3
Was versuchst du damit zu erreichen?
Eric
@Nok Imchen - Könnten Sie einen Link zu der ursprünglichen Frage bereitstellen, von der Sie den Code erhalten haben?
Jared Farrish
@ Eric, es ist das gleiche wie der unten angegebene Link
Nok Imchen
@jared, hier ist der Link stackoverflow.com/questions/433919/…
Nok Imchen

Antworten:

216

(Geänderte Version, damit es ohne prototype.js funktioniert)

function simulate(element, eventName)
{
    var options = extend(defaultOptions, arguments[2] || {});
    var oEvent, eventType = null;

    for (var name in eventMatchers)
    {
        if (eventMatchers[name].test(eventName)) { eventType = name; break; }
    }

    if (!eventType)
        throw new SyntaxError('Only HTMLEvents and MouseEvents interfaces are supported');

    if (document.createEvent)
    {
        oEvent = document.createEvent(eventType);
        if (eventType == 'HTMLEvents')
        {
            oEvent.initEvent(eventName, options.bubbles, options.cancelable);
        }
        else
        {
            oEvent.initMouseEvent(eventName, options.bubbles, options.cancelable, document.defaultView,
            options.button, options.pointerX, options.pointerY, options.pointerX, options.pointerY,
            options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, element);
        }
        element.dispatchEvent(oEvent);
    }
    else
    {
        options.clientX = options.pointerX;
        options.clientY = options.pointerY;
        var evt = document.createEventObject();
        oEvent = extend(evt, options);
        element.fireEvent('on' + eventName, oEvent);
    }
    return element;
}

function extend(destination, source) {
    for (var property in source)
      destination[property] = source[property];
    return destination;
}

var eventMatchers = {
    'HTMLEvents': /^(?:load|unload|abort|error|select|change|submit|reset|focus|blur|resize|scroll)$/,
    'MouseEvents': /^(?:click|dblclick|mouse(?:down|up|over|move|out))$/
}
var defaultOptions = {
    pointerX: 0,
    pointerY: 0,
    button: 0,
    ctrlKey: false,
    altKey: false,
    shiftKey: false,
    metaKey: false,
    bubbles: true,
    cancelable: true
}

Sie können es so verwenden:

simulate(document.getElementById("btn"), "click");

Beachten Sie, dass Sie als dritten Parameter 'Optionen' übergeben können. Die Optionen, die Sie nicht angeben, stammen aus den defaultOptions (siehe unten im Skript). Wenn Sie beispielsweise Mauskoordinaten angeben möchten, können Sie Folgendes tun:

simulate(document.getElementById("btn"), "click", { pointerX: 123, pointerY: 321 })

Sie können einen ähnlichen Ansatz verwenden, um andere Standardoptionen zu überschreiben.

Credits sollten an Kangax gehen . Hier ist die Originalquelle (prototype.js spezifisch).

TweeZz
quelle
6
Credits sollten an Kangax gehen, wie in meiner Antwort angegeben. Ich habe es bibliotheksunabhängig gemacht :)
TweeZz
Wie übergebe ich Mauskoordinaten an dieses Skript?
Dmitry
1
Ich werde den Beitrag bearbeiten und ein Beispiel hinzufügen, wie Sie
Mauskoordinaten übergeben können
1
Ich habe dies in ein CoffeeScript-Modul umgewandelt, um es einfach in Ihre Projekte hier aufzunehmen: github.com/joscha/eventr
Joscha
1
Wie unterscheidet sich das von $ (el) .click (), da Ihre Lösung für mich funktioniert, jquery Option nicht
Silver Ringvee
53

Hier ist eine reine JavaScript-Funktion, die einen Klick (oder ein beliebiges Mausereignis) auf ein Zielelement simuliert:

function simulatedClick(target, options) {

  var event = target.ownerDocument.createEvent('MouseEvents'),
      options = options || {},
      opts = { // These are the default values, set up for un-modified left clicks
        type: 'click',
        canBubble: true,
        cancelable: true,
        view: target.ownerDocument.defaultView,
        detail: 1,
        screenX: 0, //The coordinates within the entire page
        screenY: 0,
        clientX: 0, //The coordinates within the viewport
        clientY: 0,
        ctrlKey: false,
        altKey: false,
        shiftKey: false,
        metaKey: false, //I *think* 'meta' is 'Cmd/Apple' on Mac, and 'Windows key' on Win. Not sure, though!
        button: 0, //0 = left, 1 = middle, 2 = right
        relatedTarget: null,
      };

  //Merge the options with the defaults
  for (var key in options) {
    if (options.hasOwnProperty(key)) {
      opts[key] = options[key];
    }
  }

  //Pass in the options
  event.initMouseEvent(
      opts.type,
      opts.canBubble,
      opts.cancelable,
      opts.view,
      opts.detail,
      opts.screenX,
      opts.screenY,
      opts.clientX,
      opts.clientY,
      opts.ctrlKey,
      opts.altKey,
      opts.shiftKey,
      opts.metaKey,
      opts.button,
      opts.relatedTarget
  );

  //Fire the event
  target.dispatchEvent(event);
}

Hier ist ein funktionierendes Beispiel: http://www.spookandpuff.com/examples/clickSimulation.html

Sie können einen Klick auf ein beliebiges Element im DOM simulieren . So etwas simulatedClick(document.getElementById('yourButtonId'))würde funktionieren.

Sie können ein Objekt übergeben options, um die Standardeinstellungen zu überschreiben (um zu simulieren, welche Maustaste Sie möchten, ob Shift/ Alt/ Ctrlgehalten werden usw. Die akzeptierten Optionen basieren auf der MouseEvents-API .

Ich habe in Firefox, Safari und Chrome getestet. Internet Explorer muss möglicherweise speziell behandelt werden, da bin ich mir nicht sicher.

Ben Hull
quelle
Dies funktionierte hervorragend für mich in Chrome, wo die Elemente das click () -Ereignis nicht zu haben scheinen.
Howard M. Lewis Schiff
Das ist toll - außer type: options.click || 'click'sollte es wohl sein type: options.type || 'click'.
Elliot Winkler
Das Problem bei dieser Lösung ist, dass keine enthaltenen Elemente angeklickt werden. z.B. <div id = "outer"><div id = "inner"></div></div> simulatedClick(document.getElementById('outer'));klickt nicht auf das innere Element.
Dwjohnston
1
So funktioniert das Sprudeln von Ereignissen jedoch nicht. Wenn Sie auf ein äußeres Element klicken, erhalten die Vorfahren das Klickereignis, wenn es sprudelt, die untergeordneten Elemente jedoch nicht. Stellen Sie sich vor, Ihr Äußeres diventhält eine Schaltfläche oder einen Link - Sie möchten nicht, dass ein Klick auf das Äußere einen Klick auf das innere Element auslöst.
Ben Hull
5
Verwenden Sie den ||Operator in solchen Fällen nicht, denn whoops wird canBubble:options.canBubble || true,jetzt immer als wahr ausgewertet, und anscheinend wird es 5 Jahre lang niemand bemerken.
Winchestro
51

Eine einfachere und standardisiertere Methode zum Simulieren eines Mausklicks wäre die direkte Verwendung des Ereigniskonstruktors zum Erstellen und Versenden eines Ereignisses.

Obwohl die MouseEvent.initMouseEvent()Methode aus Gründen der Abwärtskompatibilität beibehalten wird, sollte die Erstellung eines MouseEvent-Objekts mithilfe des MouseEvent()Konstruktors erfolgen.

var evt = new MouseEvent("click", {
    view: window,
    bubbles: true,
    cancelable: true,
    clientX: 20,
    /* whatever properties you want to give it */
});
targetElement.dispatchEvent(evt);

Demo: http://jsfiddle.net/DerekL/932wyok6/

Dies funktioniert in allen modernen Browsern. Für alte Browser einschließlich IE MouseEvent.initMouseEventmuss leider verwendet werden, obwohl es veraltet ist.

var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", canBubble, cancelable, view,
                   detail, screenX, screenY, clientX, clientY,
                   ctrlKey, altKey, shiftKey, metaKey,
                   button, relatedTarget);
targetElement.dispatchEvent(evt);
Derek 朕 會 功夫
quelle
Dies scheint fehlzuschlagen, wenn das A-Element, auf das ich klicken möchte, href = "javascript: void (0)" hat und auf einen anderen Klick-Handler reagiert, der an das Objekt angehängt wurde.
DJJBEE
Gibt es einen schnellen Weg, um gemeinsame Ereignisse zu erhalten? Ich stelle fest, dass ich den Klick auf eine Schaltfläche leicht erhöhen kann, aber gibt es keinen Standard-Mauszeiger, "Mausblatt", auf den ich nur verweisen kann, anstatt ein neues Mausereignis wie oben beschrieben zu erstellen?
James Joshua Street
12

In der Dokumentation zum Mozilla Developer Network (MDN) finden Sie HTMLElement.click () . Weitere Veranstaltungen finden Sie hier .

Lewis
quelle
2
@Ercksen Wie auf der MDN-Seite angegeben, wird das Klickereignis des Elements nur ausgelöst, wenn es mit Elementen verwendet wird, die es unterstützen (z. B. einem der <input> -Typen).
Christophe
9

Basierend auf Dereks Antwort habe ich das überprüft

document.getElementById('testTarget')
  .dispatchEvent(new MouseEvent('click', {shiftKey: true}))

funktioniert wie erwartet auch mit Schlüsselmodifikatoren. Und dies ist keine veraltete API, soweit ich sehen kann. Sie können dies auch auf dieser Seite überprüfen .

Wizek
quelle
-1

JavaScript-Code

   //this function is used to fire click event
    function eventFire(el, etype){
      if (el.fireEvent) {
        el.fireEvent('on' + etype);
      } else {
        var evObj = document.createEvent('Events');
        evObj.initEvent(etype, true, false);
        el.dispatchEvent(evObj);
      }
    }

function showPdf(){
  eventFire(document.getElementById('picToClick'), 'click');
}

HTML Quelltext

<img id="picToClick" data-toggle="modal" data-target="#pdfModal" src="img/Adobe-icon.png" ng-hide="1===1">
  <button onclick="showPdf()">Click me</button>
BERGUIGA Mohamed Amine
quelle