La méthode initMouseEvent(..), besoin de détails

Version imprimable

Bonjour à tous,

Je me suis intéressé à DOM, et en particulier à la méthode "event.initMouseEvent":
initMouseEvent( 'type', bubbles, cancelable, windowObject, detail, screenX, screenY, clientX, clientY, ctrlKey, altKey, shiftKey, metaKey, button, relatedTarget )

Un essai fait dans une page avec une checkbox par exemple fonctionne très bien.

Mais je m'interroge sur l'utilisation de screenX et screenY. En effet, la description laisse supposer qu'un clic peut être fait de manière indépendante des élements de la page, juste en fournissant les coordonnées: on peut donc faire un click sur un point (100px,100px), quel que soit ce qui se trouve dessous.

Sauf que le déclenchement se fait par la méthode "dispatchEvent()" qui elle, si j'ai bien compris, est forcement rattachée à un objet du document (bouton, checkbox, ...).

Donc, si j'ai un document quelconque, et que je souhaite simuler un clic au point (100px,100px,), à quoi dois-je attacher le "dispatchEvent" ?

Voici un essai avec une attache sur le document, mais ça marche pô ...
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html dir="ltr" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript"> function simulateClick() { var evt = document.createEvent("MouseEvents"); evt.initMouseEvent("click", true, true, document, 1, 100, 100, 0, 0, false, false, false, false, 0, null); var cb = document.dispatchEvent(evt); } function testClick() { alert("ok"); } </script> </head><body> <input onclick="testClick();" value="test" type="button" style="width:300px;height:300px"> <input onclick="simulateClick();" value="Simulate click" type="button"> </body></html>
Merci de votre attention,
Openmind

11/10/2009, 16h18
Bovino

Salut,
Il faut bien comprendre que lorsque tu simules un événement avec InitEvent (ou InitMouseEvent dans ton cas), tu dois bien fournir à l'objet Event les paramètres dont il a besoin, d'où cette série de paramètres qui permettent à ton navigateur (attention, cette méthode n'est pas valable avec IE) de gérer correctement l'événement.
Donc les paramètres envoyés sont ceux qui vont permettre d'implémenter l'objet Event.
Dans l'exemple que tu donnes, il faut bien différencié l'événement que tu veux simuler (le click sur un élément) et les paramètres avec lesquels tu vas le simuler. Tu peux donc faire croire qu'il y a eu un clic sur un input de coordonnées 100px / 100px sans que cet élément n'y soit vraiment présent ;)

Donc pour répondre à la question, tu dois attacher le dispatchEvent à l'élément pour lequel tu as défini un écouteur, même si cet élément n'est pas présent à l'emplacement que tu décris !

EDIT : Selon moi, la raison pour laquelle ton exemple ne fonctionne pas est qu'il n'y a aucun lien entre un onclick et un addEventListener('click') !

Bonjour,

Comme il est dit dans la FAQ Ici il faut définir une cible pour ton évènement.
Donc donne un id à ton input

Code:

1
2
 
<input id='test' onclick="testClick();" value="test" type="button" style="width:300px;height:300px"/>

Et appelle le dans ta fonction

Code:

1
2
3
4
5
6
7
8
 
function simulateClick() {
  var cb = document.getElementById('test');
  var evt = document.createEvent("MouseEvents");
  evt.initMouseEvent("click", true, true, window,
    1, 100, 100, 0, 0, false, false, false, false, 0, cb);
  cb.dispatchEvent(evt);
}

12/10/2009, 12h30
openmind38fr

Wow, ça c'est de l'efficacité!

Je regarde ça ce soir, et je vous dit si ça fonctionne.

Openmind

Re-bonjour,

malheureusement, ça ne fonctionne pas ... Le fait de rajouter une cible déclenche l'évenement sur cette cible, quelles que soient les coordonnées fournies.

par exemple:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
 
<script type="text/javascript">
function simulateClick() {
  alert("ok");
  var cb = document.getElementById("simulate")
  var evt = document.createEvent("MouseEvents");
  evt.initMouseEvent("click", true, true, window,
    1, 100, 100, 0, 0, false, false, false, false, 0, null);
  cb.dispatchEvent(evt);
}
function testClick() {
	alert("test");
}
</script>
 
</head><body>
<input id="test" onclick="testClick();" value="test" type="button" style="width:300px;height:300px">
<input id="simulate" onclick="simulateClick();" value="Simulate click" type="button">
</body></html>

affiche en boucle le message "ok".

Dommage, je continue à chercher.

Openmind

Quand je parlais de cible, je parlais du bouton test.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
 
<script type="text/javascript">
function simulateClick() {
  var cb = document.getElementById("test")
  var evt = document.createEvent("MouseEvents");
  evt.initMouseEvent("click", true, true, window,
    1, 100, 100, 0, 0, false, false, false, false, 0, null);
  cb.dispatchEvent(evt);
}
function testClick() {
	alert("test");
}
</script>
 
</head><body>
<input id="test" onclick="testClick();" value="test" type="button" style="width:300px;height:300px">
<input id="simulate" onclick="simulateClick();" value="Simulate click" type="button">
</body></html>

14/10/2009, 10h11
openmind38fr

Effectivement, ça marche!

Merci beaucoup, je vais voir ce que je peux en faire.

Openmind