カスタマイズ可能なオプションを使用して JavaScript でマウス クリックをシミュレートするにはどうすればよいですか?

JavaScript を使用したマウス クリックのシミュレーション: 総合ガイド

JavaScript を使用してマウス クリック イベントをシミュレートする一般的なメソッドの 1 つは document.form です。 button.click()。このメソッドを使用すると、フォーム ボタンのクリック動作を直接トリガーできます。

ただし、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 中国語 Web サイトの他の関連記事を参照してください。