如何使用可自訂選項在 JavaScript 中模擬滑鼠點擊？

使用 JavaScript 模擬滑鼠點擊：綜合指南

要使用 JavaScript 模擬滑鼠點擊事件，常見的方法是 document.form。按鈕.單擊()。此方法可讓您直接觸發表單按鈕上的點擊行為。

但是，如果您希望更精確地模擬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);
}

此程式碼建立一個新的滑鼠事件，初始化其屬性，然後將其分派到指定的元素上。

可自訂事件模擬

為了獲得更大的靈活性，請考慮使用以下函數：

function simulate(element, eventName, options)
{
    // Set default options
    var defaultOptions = {
        pointerX: 0,
        pointerY: 0,
        button: 0,
        ctrlKey: false,
        altKey: false,
        shiftKey: false,
        metaKey: false,
        bubbles: true,
        cancelable: true
    };

    // Extend default options with provided options
    for (var property in options)
      defaultOptions[property] = options[property];

    // Determine event type
    var eventType = null;
    for (var name in eventMatchers)
    {
        if (eventMatchers[name].test(eventName)) { 
            eventType = name; 
            break; 
        }
    }

    // Create and initialize event
    var oEvent;
    if (document.createEvent)
    {
        if (eventType == 'HTMLEvents')
        {
            oEvent = document.createEvent(eventType);
            oEvent.initEvent(eventName, defaultOptions.bubbles, defaultOptions.cancelable);
        }
        else
        {
            oEvent = document.createEvent(eventType);
            oEvent.initMouseEvent(eventName, defaultOptions.bubbles, defaultOptions.cancelable, document.defaultView,
            defaultOptions.button, defaultOptions.pointerX, defaultOptions.pointerY, defaultOptions.pointerX, defaultOptions.pointerY,
            defaultOptions.ctrlKey, defaultOptions.altKey, defaultOptions.shiftKey, defaultOptions.metaKey, defaultOptions.button, element);
        }
        element.dispatchEvent(oEvent);
    }
    else
    {
        // Legacy IE fallback
        defaultOptions.clientX = defaultOptions.pointerX;
        defaultOptions.clientY = defaultOptions.pointerY;
        oEvent = document.createEventObject();
        oEvent = extend(oEvent, defaultOptions);
        element.fireEvent('on' + eventName, oEvent);
    }

    return element;
}

此函數允許您為模擬事件指定自訂選項，包括滑鼠座標、按下的按鈕和修飾鍵。

用法

要使用該功能，只需提供目標元素、事件名稱和任何所需的選項：

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

這將使用自訂滑鼠座標模擬“btn”元素上的點擊事件。

以上是如何使用可自訂選項在 JavaScript 中模擬滑鼠點擊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！