JavaScript でクリックをシミュレートする方法: `click()` と `dispatchEvent()`?

JavaScript でのクリックのシミュレーション: ガイド

JavaScript を使用した要素のクリックのシミュレーションは、Web 開発における一般的なタスクです。これは、ブラウザの互換性要件に応じて、さまざまな方法で実現できます。

click() メソッドの使用 (IE のみ)

Internet Explorer では、以下を使用できます。クリックイベントをトリガーしたい要素に直接 click() メソッドを追加します:

document.getElementById('btn').click();

dispatchEvent() メソッド (最新のブラウザ)

最新のブラウザの場合、dispatchEvent() メソッドを使用してカスタム マウス クリック イベントを作成し、要素にディスパッチできます:

var evObj = document.createEvent('MouseEvents');
evObj.initMouseEvent('click', true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null);
document.getElementById('btn').dispatchEvent(evObj);

コードが機能しない理由

質問で提供されたコードは機能しませんSimulateClick() 関数に重要な詳細が欠けているため、機能します。 MouseEvents API の initMouseEvent() メソッドでは、ブラウザ ウィンドウ内のクリックの位置を指定する clientX プロパティと clientY プロパティを設定する必要があります。

改訂コード

この問題を解決するには、次のコードを追加して clientX と clientY を設定します。プロパティ:

evObj.clientX = 0;
evObj.clientY = 0;

更新されたコードは次のようになります:

function simulateClick(control) {
  if (document.all) {
    control.click();
  } else {
    var evObj = document.createEvent('MouseEvents');
    evObj.initMouseEvent('click', true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null);
    evObj.clientX = 0;
    evObj.clientY = 0;
    control.dispatchEvent(evObj);
  }
}

これで、ID 'mytest1' の要素のクリックが正常にシミュレートされるはずです。

以上がJavaScript でクリックをシミュレートする方法: `click()` と `dispatchEvent()`?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。