Simuler le click d'un bouton en injectant des coordonnées dans une fonction

**patricktoulon** · 22/03/2016, 19h23

Bonjour a tous
je cherche le moyen de cliquer n'importe ou dans le body et que ca me renvoie le nom ou id du bouton qui se trouve dans les coordonnées x y
j'ai trouver cela dans la faq et un peu partout
mais je ne sais pas comment le faire fonctionner
dans cet exemple j'ai deux bouton
le bouton a cliquer et le bouton qui appelle la fonction pour cliquer sur le premier en injectant des coordonnées

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!doctype html>
<html>
<head>
<script>
function evenement(xx,yy){
oEvent = document.createEvent( "MouseEvents" );
oEvent.initMouseEvent(
  "click",    // le type d'événement souris
  true,       // est-ce que l'événement doit se propager (bubbling) ?
  true,       // est-ce que le défaut pour cet événement peut être annulé ?
  window,     // l' 'AbstractView' pour cet événement
  1,          // details -- Pour les événements click, le nombre de clicks
  1,          // screenX
  yy,          // screenY
  xx,          // clientX
  1,          // clientY
  false,      // est-ce que la touche Ctrl est pressée ?
  false,      // est-ce que la touche Alt est pressée ?
  false,      // est-ce que la touche Shift est pressée ?
  false,      // est-ce que la touche Meta est pressée ?
  0,          // quel est le bouton pressé
  target      // l'élément source de cet événement
);
//target.dispatchEvent( oEvent );
target.fireEvent( "onclick" );
}
</script>
</head>
<body style="margin-left:0;padding-top:0;border:1px solid red;">
<button onclick="alert('Clicked')" id="btn">vrai bouton</button>
<button style ="position:absolute;top; 500;" onclick="evenement(10,23)" id="btn2">clique sur le vrai  bouton</button>
<script>
evenement ("btn");
</script>
</body>
</html>

si quelqu'un a une idée je suis preneur
tout ce qui compte c'est le fait que le bouton est inconnu(plusieurs bouton ajouter dynamiquement DOM) seules les coordonnées doivent donner ou non un bouton cliqué

ps: pour Ie 9 a IE 11

**Beginner.** · 23/03/2016, 22h14

Salut,

Dans ce fil Cliquer sur une position X Y il y a une réponse au sujet d'une fonction...

J'ai testé ici : http://jsbin.com/nozuhakuza/edit?html,output en utilisant :

onclick="document.elementFromPoint(10, 23).click();"

Avec Firefox et IE 8 ça marche apparemment...

**patricktoulon** · 23/03/2016, 22h26

Bonsoir beginner je te remercie pour ta réponse
je connaissais pas cet api je vais essayer avec IE car la destination de cet exercice est un composant Webbrowser.ocx dans VB utilisant les librairie IE9

je reviens après test
merci a toi

**Beginner.** · 23/03/2016, 22h31

De rien ! J'ai aussi testé IE 8 (je n'ai pas la version 9) et ça marche aussi...

**patricktoulon** · 23/03/2016, 23h05

re
c'est bien ce que je pensais ca fonctionne pas vraiment
tiens teste ce code tu verra j'ai ajouté le message et des div
en fait tout se met en vert
et en plus mes div se placent pas comme il faut !

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
23
24
25
<html>
<head>
<title>Exemple d'utilisation d'elementFromPoint</title>
<script type="text/javascript">
function changeColor2(newColor)
{
 elem = document.elementFromPoint(600,2);
 elem.style.color = newColor;
alert(elem.id)
}
</script>
</head>
<body style="width100%;height:100%">
<p id="para1">Un peu de texte ici</p>
<div id="div1" style="postion:'absolute';left:200px,top:150px;width:50px;height:40px;border:1px solid red;float:left"> div1</div>
<div id="div1" style="postion:absolute;left:300px,top:80px;width:50px;height:40px;border:1px solid red;float:left"> div1</div>
<div id="div1" style="postion:absolute;left:500px,top:250px;width:50px;height:40px;border:1px solid red;float:left"> div1</div>
<div id="div1" style="postion:absolute;left:600px,top:350px;width:50px;height:40px;border:1px solid red;float:left"> div1</div>
<p id="para1">encore un peu de texte ici</p>
<p id="para1">encore un peu de texte ici</p>
<p id="para1">encore un peu de texte ici</p>
</br>
<button onclick="changeColor2('green');">vert</button>
</body>
</html>

**Beginner.** · 23/03/2016, 23h29

J'ai testé et ça marche, regarde ici : http://jsbin.com/jovunetage/edit?html,console,output

Seul le texte de la troisième div passe au vert...

Alors le problème c'est les coordonnées, à (600,2) cela renvoi un élément nul donc ça foire... mais à 127,55 c'est bon.

J'ai ajouté l'affichage des coordonnées pour voir...

J'ai vu sur site qu'avec IE les coordonnées fonctionnent pas pareil, je vais chercher le lien ...

**Beginner.** · 23/03/2016, 23h35

J'ai changé car tu as mis le même texte et le même id pour chaque div : http://jsbin.com/jovunetage/edit?html,console,output

**patricktoulon** · 23/03/2016, 23h56

re
ok visiblement ca fonctionne mais saurais tu me dire pourquoi mes divs se placent comme ca il ne devraient pas puisque position absolute
il faudrait éventuellement ajouter une condition sur le null

**Beginner.** · 24/03/2016, 00h05

C'est ce que j’essaie de comprendre aussi, c'est vraiment étrange, ça doit être un truc tout bête mais ça m’échappe aussi !

**Beginner.** · 24/03/2016, 00h11

Ah oui tu as écrit : "postion", il manque un i

Et moi j'ai copié/collé ton code...

**Beginner.** · 24/03/2016, 00h18

Il y a aussi des quottes que j'ai enlevées pour la première div et apparemment il faut mettre des points-virgules à la place des virgules...

Teste ici : http://jsbin.com/miqubizixe/edit?html,output

**patricktoulon** · 24/03/2016, 00h20

puré ya des jours ou je ferais mieux d'arrêter d'arrêter moi

je plombe dessus depuis le debut

puré de puré de puré !!!!!!!
je te remercie je vais étudier ca moi aussi et mettre ca au propre et trouver comment tester le null

un grand merci a toi

**Beginner.** · 24/03/2016, 00h26

Il faudrait un EDI qui détecte ce genre de chose pour nous, c'est une des choses qui me déroute avec javascript surtout quand on a fait avant du Java avec Eclipse...

**Beginner.** · 24/03/2016, 00h45

J'ai testé le null ici : http://jsbin.com/kodomecofu/1/edit?html,console,output, on a null avec (600,2)

Si tu mets par exemple (500,2) cela point sur html donc tout se met en vert normal...

**patricktoulon** · 24/03/2016, 00h46

oui des fois je suis surpris de la limite ou de la puissance de javascript

bon tiens le voila au propre et j'ai toujours pas mes divs en places c'est vraiment bizarre encore un truc qui doit m'échapper
chose aussi surprenante le bouton lui au moins devrait être bien placé et bien non!
bon je suis crevé peut être que demain je verrais plus clair

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
23
24
25
26
27
28
29
30
31
32
33
<html>
<head>
<title>Exemple d'utilisation d'elementFromPoint</title>
<meta http-equiv="X-UA-Compatible" content="IE=10">
<script type="text/javascript">
 
function changeColor2(newColor)
{
 elem = document.elementFromPoint(127,55);  
 elem.style.color = newColor;
 alert(elem.id);
}
function OnMouseMove (event) {
 
  var xy = document.getElementById ("xy");  
  xy.innerHTML = event.clientX + ", " + event.clientY;
  }</script>
</head>
<body  style="padding-top:0;margin-top:0;margin-left:0;"onmousemove="OnMouseMove (event);">
 <div id="corps" style="padding-top:0;margin-top:0;left:0px,top:0px;width:100%;height:75%;border:1px solid blue;">
<div id="div1" style="position:absolute;left:200px,top:150px;width:50px;height:40px;border:1px solid red;"> div1</div>
 
<div id="div2" style="position:absolute;left:300px,top:80px;width:50px;height:40px;border:1px solid red;"> div2</div>
 
<div id="div3" style="position:absolute;left:500px,top:250px;width:50px;height:40px;border:1px solid red;"> div3</div>
 
<div id="div4" style="position:absolute;left:600px,top:350px;width:50px;height:40px;border:1px solid red;"> div4</div>
  <div>
<button onclick="changeColor2('green');">vert</button>
<p id="xy">xy</p>
 
</body>
</html>

**Beginner.** · 24/03/2016, 00h54

Nos messages se sont croisés, regarde mon message précédent...

Sinon là cela ne marche pas car tu as encore mis des virgules :

<div id="div1" style="position:absolute;left:200px,top:150px;width:50px;height:40px;border:1px solid red;"> div1</div>

**patricktoulon** · 24/03/2016, 01h07

oui j'ai vu que l'on s'est croisé je suis aller voir et récupérer le test sur null

puré les virgule je suis vraiment fatigué

je crois qu'il est temps d'aller me coucher moi
bon c'est bon j'ai fait les testes en modifiant les cordonnée ca rend bien

bien plus pratique finalement que selection pour les élément de type div,img etc....

je te remercie pour ton aide
je regarderais plus en détail demain pour l'heure dodo

merci

**Beginner.** · 24/03/2016, 01h12

Ok bonne nuit...

J'ai testé ici http://jsbin.com/yipototoma/1/edit?html,output dans le cas où les coordonnées pointent sur la balise html et ça met évidement tout en vert donc si tu ne souhaites pas cela il faudra en plus de null tester html, body...

**patricktoulon** · 24/03/2016, 10h35

Bonjour beginner
me voila un peu plus reveillé

visiblement je n'arrive pas a injecter les coordonnées
sans doute un soucis de syntaxe encore

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<html>
<head>
<title>Exemple d'utilisation d'elementFromPoint</title>
<meta http-equiv="X-UA-Compatible" content="IE=10">
<script type="text/javascript">
 
function changeColor2(newColor,a,b)
alert(a);
var xx=a;
var yy=b;
{
 elem = document.elementFromPoint(xx,yy);   
 
  if(elem === null){
    alert("null !!!");
    return;
  }     
    else {
       elem.style.color = newColor;
       var msg = "balise : " + elem.tagName + "  id = " + elem.id
       alert(msg);
    }
}
function OnMouseMove (event) {
 
  var xy = document.getElementById ("xy");  
  xy.innerHTML = event.clientX + ", " + event.clientY;
  }</script>
</head>
<body  style="padding-top:0;margin-top:0;margin-left:0;"onmousemove="OnMouseMove (event);">
 
<div id="div1" style="position:absolute;left:200px;top:150px;width:50px;height:40px;border:1px solid red"> div1</div>
 
<div id="div2" style="position:absolute;left:300px;top:80px;width:50px;height:40px;border:1px solid red"> div2</div>
 
 
<div id="div4" style="position:absolute;left:600px;top:350px;width:50px;height:40px;border:1px solid red"> div4</div>
 <div id="div3" style="position:absolute;left:500px;top:250px;width:50px;height:40px;border:1px solid red"> div3</div>
 
<button onclick="changeColor2('green',225,175);">vert</button>
<p id="xy">xy</p>
 
</body>
</html>

une idéee?