JavaScript でマウス クリック イベントをシミュレートするにはどうすればよいですか?

JavaScript でのマウス クリック イベントのシミュレーション

document.form.button.click() メソッドはボタン クリックをトリガーする一般的な方法ですが、場合によっては実際の onclick イベントをシミュレートしたいとします。

を使用しないイベントのシミュレートPrototype.js

Prototype.js を使用せずに onclick イベントをシミュレートするには、次のコードを利用できます。

function simulate(element, eventName) {
  // Define options and event type
  const options = extend(defaultOptions, arguments[2] || {});
  let oEvent, eventType = null;

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

  // Ensure event type support
  if (!eventType) {
    throw new SyntaxError("Only HTMLEvents and MouseEvents interfaces are supported.");
  }

  // Create event using `document.createEvent`
  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 {
    // Internet Explorer fallback
    options.clientX = options.pointerX;
    options.clientY = options.pointerY;
    const evt = document.createEventObject();
    oEvent = extend(evt, options);
    element.fireEvent("on" + eventName, oEvent);
  }

  return element;
}

シミュレーション関数の使用

この関数を使用するには要素とイベント名を渡すだけです:

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

追加のオプションを指定することもできます。マウス座標などのイベントをカスタマイズします:

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

このアプローチにより、JavaScript でのマウス クリック イベントのシミュレーションに対する柔軟性と制御が向上します。

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