Bagaimana cara mensimulasikan klik mouse menggunakan JavaScript?

Saya tahu tentang document.form.button.click()metodenya. Namun, saya ingin tahu bagaimana mensimulasikan onclickacara tersebut.

Saya menemukan kode ini di suatu tempat di Stack Overflow, tetapi saya tidak tahu cara menggunakannya :(

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

Bagaimana cara mengaktifkan peristiwa klik mouse menggunakan JavaScript?

(Versi modifikasi untuk membuatnya berfungsi tanpa prototype.js)

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
}

Anda bisa menggunakannya seperti ini:

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

Perhatikan bahwa sebagai parameter ketiga, Anda dapat memasukkan 'opsi'. Opsi yang tidak Anda tentukan diambil dari defaultOptions (lihat bagian bawah skrip). Jadi, jika Anda misalnya ingin menentukan koordinat mouse, Anda dapat melakukan sesuatu seperti:

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

Anda dapat menggunakan pendekatan serupa untuk mengganti opsi default lainnya.

Kredit harus diberikan kepada kangax . Berikut adalah sumber aslinya (spesifik prototype.js).

Berikut adalah fungsi JavaScript murni yang akan mensimulasikan klik (atau peristiwa mouse apa pun) pada elemen target:

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

Berikut adalah contoh yang berfungsi: http://www.spookandpuff.com/examples/clickSimulation.html

Anda dapat menyimulasikan klik pada elemen apa pun di DOM . Sesuatu seperti itu simulatedClick(document.getElementById('yourButtonId'))akan berhasil.

Anda dapat mengirimkan sebuah objek ke optionsuntuk menimpa default (untuk mensimulasikan tombol mouse mana yang Anda inginkan, apakah Shift/ Alt/ Ctrlditahan, dll. Opsi yang diterimanya didasarkan pada MouseEvents API .

Saya telah menguji di Firefox, Safari, dan Chrome. Internet Explorer mungkin memerlukan perlakuan khusus, saya tidak yakin.

Cara yang lebih mudah dan lebih standar untuk mensimulasikan klik mouse adalah secara langsung menggunakan konstruktor acara untuk membuat acara dan mengirimkannya.

Meskipun MouseEvent.initMouseEvent()metode ini disimpan untuk kompatibilitas ke belakang, pembuatan objek MouseEvent harus dilakukan menggunakan MouseEvent()konstruktor.

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/

Ini berfungsi di semua browser modern. Untuk browser lama termasuk IE, MouseEvent.initMouseEventsayangnya harus digunakan meskipun sudah usang.

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

Dari dokumentasi Mozilla Developer Network (MDN), HTMLElement.click () adalah yang Anda cari. Anda dapat mengetahui lebih banyak acara di sini .

Berdasarkan jawaban Derek, saya memverifikasi itu

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

berfungsi seperti yang diharapkan bahkan dengan pengubah kunci. Dan ini bukan API yang usang, sejauh yang saya bisa lihat. Anda juga dapat memverifikasi di halaman ini .

Anda dapat menggunakan elementFromPoint :

document.elementFromPoint(x, y);

didukung di semua browser: https://caniuse.com/#feat=element-from-point

Kode JavaScript

   //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');
}

Kode HTML

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