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 などの特定の関数が不要になります。これにより、任意の要素の HTMLEvent と MouseEvent の両方のシミュレーションが可能になります。

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

この関数は、要素、eventName、オプションの 3 つのパラメータを受け入れます。デフォルトのオプションが提供されていますが、カスタム オプション オブジェクトを渡すことでオーバーライドできます。

使用法

シミュレートを使用してマウス クリック イベントをトリガーするには:

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

カスタマイズ

オプション オブジェクトを使用すると、マウス座標、修飾子 (Ctrl、Alt、シフト、メタ）、およびイベント動作（バブル、キャンセル可能）。例:

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

以上がJavaScript でマウスのクリックと Onclick イベントをシミュレートするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。