Comment simuler des clics en JavaScript : `click()` vs `dispatchEvent()` ?

Simulation des clics en JavaScript : un guide

La simulation des clics sur des éléments à l'aide de JavaScript est une tâche courante dans le développement Web. Cela peut être accompli de différentes manières, en fonction des exigences de compatibilité du navigateur.

À l'aide de la méthode click() (IE uniquement)

Dans Internet Explorer, vous pouvez utiliser la méthode click() directement sur l'élément sur lequel vous souhaitez déclencher un événement click :

document.getElementById('btn').click();

Utilisation de la méthode dispatchEvent() (Modern Navigateurs)

Pour les navigateurs modernes, vous pouvez utiliser la méthode dispatchEvent() pour créer un événement de clic de souris personnalisé et le distribuer à l'élément :

var evObj = document.createEvent('MouseEvents');
evObj.initMouseEvent('click', true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null);
document.getElementById('btn').dispatchEvent(evObj);

Pourquoi Votre code ne fonctionne pas

Le code fourni dans la question ne fonctionne pas car il manque un détail important à la fonction simulationClick(). La méthode initMouseEvent() de l'API MouseEvents nécessite que les propriétés clientX et clientY soient définies, qui spécifient la position du clic dans la fenêtre du navigateur.

Code révisé

Pour résoudre le problème, ajoutez le code suivant pour définir les propriétés clientX et clientY :

evObj.clientX = 0;
evObj.clientY = 0;

Le code mis à jour ressemblera à ceci :

function simulateClick(control) {
  if (document.all) {
    control.click();
  } else {
    var evObj = document.createEvent('MouseEvents');
    evObj.initMouseEvent('click', true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null);
    evObj.clientX = 0;
    evObj.clientY = 0;
    control.dispatchEvent(evObj);
  }
}

Cela devrait maintenant simuler avec succès un clic sur l'élément portant l'ID 'mytest1'.

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!