Comment puis-je simuler des clics de souris et des événements Onclick en JavaScript ?

Imiter les clics de souris avec JavaScript

En JavaScript, la technique document.form.button.click() est bien connue pour simuler les clics de boutons. Cependant, la simulation de l'événement onclick nécessite une approche différente. Cet article explique comment y parvenir grâce à une solution de code complète.

Simulation de l'événement 'onclick'

L'extrait de code fourni, contextMenuClick(), initialise un objet MouseEvent et le distribue à l'objet souhaité. élément. Cela déclenche efficacement l'événement onclick :

function contextMenuClick() {
  var element = 'button';
  var evt = element.ownerDocument.createEvent('MouseEvents');

  evt.initMouseEvent('contextmenu', true, true, element.ownerDocument.defaultView,
                     1, 0, 0, 0, 0, false, false, false, false, 1, null);

  element.dispatchEvent(evt);
}

Simulation générique d'événements de souris

L'introduction d'une fonction généralisée appelée simulation élimine le besoin de fonctions spécifiques telles que contextMenuClick. Elle permet de simuler à la fois HTMLEvents et MouseEvents pour n'importe quel élément :

function simulate(element, eventName, options) {
  var eventType;

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

  ... // Function implementation continues

  return element;
}

Cette fonction accepte trois paramètres : element, eventName et options. Les options par défaut sont fournies, mais peuvent être remplacées en passant un objet d'options personnalisé.

Utilisation

Pour déclencher un événement de clic de souris à l'aide de la simulation :

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

Personnalisation

L'objet options permet de personnaliser divers paramètres d'événement, notamment les coordonnées de la souris, les modificateurs (Ctrl, Alt, Shift, Meta) et le comportement de l'événement (bulles, annulable). Par exemple :

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

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!