Làm thế nào để mô phỏng một cú click chuột bằng JavaScript?

Tôi biết về document.form.button.click()phương pháp. Tuy nhiên, tôi muốn biết làm thế nào để mô phỏng onclicksự kiện này.

Tôi đã tìm thấy mã này ở đâu đó trên Stack Overflow, nhưng tôi không biết cách sử dụng nó :(

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

Làm cách nào để kích hoạt sự kiện nhấp chuột bằng JavaScript?

(Phiên bản sửa đổi để làm cho nó hoạt động mà không có mẫu.j.j)

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
}

Bạn có thể sử dụng nó như thế này:

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

Lưu ý rằng với tư cách là tham số thứ ba, bạn có thể chuyển vào 'tùy chọn'. Các tùy chọn bạn không chỉ định được lấy từ defaultOptions (xem phần dưới của tập lệnh). Vì vậy, nếu bạn muốn chỉ định tọa độ chuột, bạn có thể làm một cái gì đó như:

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

Bạn có thể sử dụng một cách tiếp cận tương tự để ghi đè các tùy chọn mặc định khác.

Tín dụng nên đi đến kangax . Đây là nguồn ban đầu (cụ thể là nguyên mẫu).

Đây là một hàm JavaScript thuần sẽ mô phỏng một lần nhấp (hoặc bất kỳ sự kiện chuột nào) trên một phần tử đích:

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

Đây là một ví dụ hoạt động: http://www.spookandpuff.com/examples/clickSimulation.html

Bạn có thể mô phỏng một lần nhấp vào bất kỳ yếu tố nào trong DOM . Một cái gì đó như simulatedClick(document.getElementById('yourButtonId'))sẽ làm việc.

Bạn có thể chuyển một đối tượng vào optionsđể ghi đè mặc định (để mô phỏng nút chuột nào bạn muốn, cho dù Shift/ Alt/ Ctrlđược giữ, v.v. Các tùy chọn mà nó chấp nhận dựa trên API MouseEvents .

Tôi đã thử nghiệm trên Firefox, Safari và Chrome. Internet Explorer có thể cần điều trị đặc biệt, tôi không chắc chắn.

Một cách dễ dàng và chuẩn hơn để mô phỏng nhấp chuột sẽ được sử dụng trực tiếp bằng cách sử dụng trình tạo sự kiện để tạo sự kiện và gửi nó.

Mặc dù MouseEvent.initMouseEvent()phương thức được giữ để tương thích ngược, việc tạo đối tượng MouseEvent nên được thực hiện bằng cách sử dụng hàm MouseEvent()tạo.

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

Bản trình diễn: http://jsfiddle.net/DerekL/932wyok6/

Điều này hoạt động trên tất cả các trình duyệt hiện đại. Đối với các trình duyệt cũ bao gồm IE, MouseEvent.initMouseEventsẽ không may sử dụng mặc dù nó không dùng nữa.

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

Từ tài liệu Mạng của Nhà phát triển Mozilla (MDN), HTMLEuity.click () là thứ bạn đang tìm kiếm. Bạn có thể tìm hiểu thêm các sự kiện ở đây .

Dựa trên câu trả lời của Derek, tôi đã xác minh rằng

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

hoạt động như mong đợi ngay cả với các sửa đổi quan trọng. Và đây không phải là một API không dùng nữa, theo như tôi có thể thấy. Bạn có thể xác minh trên trang này là tốt .

Bạn có thể sử dụng phần tửFromPoint :

document.elementFromPoint(x, y);

được hỗ trợ trong tất cả các trình duyệt: https://caniuse.com/#feat=element-from-point

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

Mã 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>