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

**openmind38fr** · 11/10/2009, 15h57

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Bovino** · 11/10/2009, 16h18

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') !

**hotline** · 11/10/2009, 18h46

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Et appelle le dans ta fonction

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**openmind38fr** · 12/10/2009, 12h30

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

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

Openmind

**openmind38fr** · 13/10/2009, 14h19

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**hotline** · 14/10/2009, 09h53

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager