`document.form.button.click()` を使用せずに JavaScript でマウス クリック イベントをシミュレートするにはどうすればよいですか?

document.form.button.click() に依存せずに JavaScript を使用してマウス クリック イベントをシミュレートする

document.form.button.click についてはよく知っていますが、 () メソッドについては、別のアプローチ、つまり onclick イベントをシミュレートする方法を詳しく見てみましょう。そうすることで、Web アプリケーション用に、よりカスタマイズされた具体的なマウス クリック動作を作成できます。

マウス クリック イベントをシミュレートするには、simulator():

function simulate(element, eventName) {
  var options = extend(defaultOptions, arguments[2] || {});
  var oEvent, eventType = null;

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

  if (!eventType)
    throw new SyntaxError('Only HTMLEvents and MouseEvents interfaces are supported');

  if (document.createEvent) {
    oEvent = document.createEvent(eventType);
    if (eventType == 'HTMLEvents') {
      oEvent.initEvent(eventName, options.bubbles, options.cancelable);
    } else {
      oEvent.initMouseEvent(eventName, options.bubbles, options.cancelable, document.defaultView,
        options.button, options.pointerX, options.pointerY, options.pointerX, options.pointerY,
        options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, element);
    }
    element.dispatchEvent(oEvent);
  } else {
    options.clientX = options.pointerX;
    options.clientY = options.pointerY;
    var evt = document.createEventObject();
    oEvent = extend(evt, options);
    element.fireEvent('on' + eventName, oEvent);
  }
  return element;
}

simulate() は、要素 (クリックをシミュレートする HTML 要素) とeventName (「クリック」など、発生させたいイベント) の 2 つの主な引数を取ります。イベントをカスタマイズするには、オプションの 3 番目のパラメータである options を渡すことができます。これにより、ボタンのタイプやマウス座標などの属性を指定できます。

simulator() 関数の呼び出しは簡単です。

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

このコードは、ID「btn」を持つ要素のマウスクリックをシミュレートします。さらに次のようなオプションを指定できます。

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

これにより、指定された座標にある ID「btn」を持つ要素でのマウス クリックがシミュレートされます。

次を使用してマウス クリック イベントをシミュレートします。 JavaScript を使用すると、Web ページ上のクリックの動作と外観をより詳細に制御できるようになります。この手法により、Web アプリケーションとのより正確なカスタマイズされた対話が可能になります。

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