如何在 JavaScript 中模擬滑鼠點擊和 Onclick 事件？

使用 JavaScript 模擬滑鼠點擊

在 JavaScript 中，document.form.button.click() 技術因模擬按鈕點擊而聞名。然而，模擬 onclick 事件需要不同的方法。本文探討如何透過全面的程式碼解決方案來實現這一目標。

模擬「onclick」事件

提供的程式碼片段 contextMenuClick() 初始化 MouseEvent 物件並將其分派到所需的位置元素。這有效地觸發了 onclick 事件：

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

通用滑鼠事件模擬

引入稱為模擬的通用函數消除了對 contextMenuClick 等特定函數的需求。它允許模擬任何元素的 HTMLEvents 和 MouseEvents：

function simulate(element, eventName, options) {
  var eventType;

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

  ... // Function implementation continues

  return element;
}

此函數接受三個參數：element、eventName 和 options。提供了預設選項，但可以透過傳入自訂選項物件來覆蓋。

用法

使用模擬觸發滑鼠點擊事件：

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

自訂

選項物件允許自訂各種事件參數，包括滑鼠座標、修飾符（Ctrl、Alt、Shift、Meta）和事件行為（氣泡，可取消）。例如：

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

以上是如何在 JavaScript 中模擬滑鼠點擊和 Onclick 事件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！