Comment puis-je simuler des événements de clic de souris en JavaScript ?-js tutoriel-php.cn

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

DDD

Libérer： 2024-12-04 02:42:10

original

554 Les gens l'ont consulté

How Can I Simulate Mouse Click Events in 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;
}

Copier après la connexion

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");

Copier après la connexion

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

Copier après la connexion

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!