Wie simuliere ich einen Mausklick mit JavaScript?

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?

(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).

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.

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

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

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 .

Sie können elementFromPoint verwenden :

document.elementFromPoint(x, y);

wird in allen Browsern unterstützt: https://caniuse.com/#feat=element-from-point

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>