Comment puis-je simuler des événements de clic de souris en JavaScript ?

Simulation d'événements de clic de souris en JavaScript

Bien que la méthode document.form.button.click() soit une approche courante pour déclencher des clics sur des boutons, il peut y avoir des cas où vous souhaitez simuler l'événement onclick réel.

Simulation d'événements sans Prototype.js

Pour simuler un événement onclick sans utiliser Prototype.js, vous pouvez exploiter le code suivant :

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

Utilisation de la fonction de simulation

Pour utiliser cette fonction, transmettez simplement l'élément et le nom de l'événement :

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

Vous pouvez également spécifier des options supplémentaires pour personnaliser l'événement, telles que les coordonnées de la souris :

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

Ceci Cette approche offre une plus grande flexibilité et un plus grand contrôle sur la simulation des événements de clic de souris en JavaScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!