Как смоделировать щелчок мыши с помощью JavaScript?

Я знаю о document.form.button.click() метод. Тем не менее, я хотел бы знать, как имитировать событие onclick.

Я нашел этот код где-то здесь в Stack Overflow, но я не знаю, как его использовать:(

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

Как запустить событие щелчка мышью с использованием JavaScript?

Источник

8 ответов

Решение

(Модифицированная версия, чтобы она работала без 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
}

Вы можете использовать это так:

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

Обратите внимание, что в качестве третьего параметра вы можете передать "параметры". Опции, которые вы не указали, взяты из defaultOptions (см. Нижнюю часть скрипта). Так что если вы, например, хотите указать координаты мыши, вы можете сделать что-то вроде:

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

Вы можете использовать аналогичный подход, чтобы переопределить другие параметры по умолчанию.

Кредиты должны идти в Кангакс. Вот оригинальный источник (специфичный для prototype.js).

Источник

Более простым и стандартным способом симуляции щелчка мыши было бы непосредственное использование конструктора событий для создания события и его отправки.

Хотя MouseEvent.initMouseEvent() метод сохраняется для обратной совместимости, создание объекта MouseEvent должно выполняться с использованием MouseEvent() конструктор.

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

Демо: http://jsfiddle.net/DerekL/932wyok6/

Это работает во всех современных браузерах. Для старых браузеров, включая IE, MouseEvent.initMouseEvent будет использоваться, к сожалению, хотя это устарело.

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);
Источник

Вот функция JavaScript, которая будет имитировать щелчок (или любое событие мыши) на целевом элементе:

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

Вот рабочий пример: http://www.spookandpuff.com/examples/clickSimulation.html

Вы можете смоделировать щелчок по любому элементу в DOM. Что-то вроде simulatedClick(document.getElementById('yourButtonId')) должно сработать.

Вы можете передать объект в options переопределить значения по умолчанию (имитировать, какую кнопку мыши вы хотите, удерживать ли Shift/Alt/Ctrl и т. д. Параметры, которые он принимает, основаны на MouseEvents API.

Я тестировал в Firefox, Safari и Chrome. Internet Explorer может потребоваться специальная обработка, я не уверен.

Источник

Основываясь на ответе Дерека, я убедился, что

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

работает как положено даже с ключевыми модификаторами. И это не устаревший API, насколько я вижу. Вы также можете проверить на этой странице.

Источник

Из документации Mozilla Developer Network (MDN) HTMLElement.click() - это то, что вы ищете. Вы можете узнать больше событий здесь.

Источник

Вы можете использовать elementFromPoint:

document.elementFromPoint(x, y);

поддерживается во всех браузерах: https://caniuse.com/

Источник

Не полагайтесь на устаревшие функции API. Все браузеры поддерживают приведенный ниже пример. См. документы и пример здесь

      if (document.createEvent) {

    // Create a synthetic click MouseEvent
    let event = new MouseEvent("click", {
     bubbles: true,
     cancelable: true,
     view: window
    });

    // Dispatch the event.
    link.dispatchEvent(event);

}
Источник

Код 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');
}

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>
Источник
Другие вопросы по тегам