Comment puis-je simuler des événements de clic de souris en JavaScript au-delà de « document.form.button.click() » ?

Simulation d'événements de clic de souris avec JavaScript : au-delà de document.form.button.click()

Le document.form.button.click( ) nous permet de déclencher par programme un clic sur un bouton. Cependant, il ne simule pas l'événement onclick réel. Pour une simulation d'événement plus complète, nous devons approfondir le domaine de la création d'événements personnalisés.

Une méthode consiste à utiliser la fonction createEvent() de JavaScript. Cependant, cette approche présente des limites lorsqu'il s'agit de types d'événements autres que les événements HTML ou de souris.

Pour surmonter cela, nous pouvons exploiter une approche plus avancée :

function simulate(element, eventName) {
  // Extract event type and create an event object
  var eventType = eventMatchers[eventName];
  if (!eventType) throw new Error('Event type not supported');
  var event;
  if (document.createEvent) {
    event = document.createEvent(eventType);
    eventType == 'HTMLEvents'
      ? event.initEvent(eventName, true, true)
      : event.initMouseEvent(
          eventName,
          true,
          true,
          document.defaultView,
          0,
          0,
          0,
          0,
          0,
          false,
          false,
          false,
          false,
          0,
          element
        );
  } else {
    var evt = document.createEventObject();
    event = extend(evt, defaultOptions);
  }

  // Dispatch the event
  element.dispatchEvent(event);
}

Cette fonction prend un élément et un type d'événement comme paramètres, créant un objet d'événement personnalisé basé sur le type d'événement. Il distribue ensuite l'événement sur l'élément donné.

Pour améliorer encore cette approche, nous pouvons inclure des options d'événement par défaut et permettre aux utilisateurs de les remplacer en passant des paramètres supplémentaires :

function simulate(element, eventName, options) {
  options = extend(defaultOptions, options || {});
  // ... rest of the simulate function
}

Avec ceci amélioration, vous pouvez désormais spécifier des coordonnées de souris personnalisées ou d'autres paramètres d'événement comme suit :

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

En utilisant cette technique de simulation d'événement personnalisée, vous pouvez déclencher pratiquement n'importe quel événement de clic de souris avec un contrôle total sur les paramètres de l'événement, débloquant des possibilités avancées dans vos applications 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!