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

Version imprimable

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:

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

23/03/2016, 21h14
Beginner.

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...
23/03/2016, 21h26
patricktoulon

re

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
23/03/2016, 21h31
Beginner.

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

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:

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>

23/03/2016, 22h29
Beginner.

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 ...
23/03/2016, 22h35
Beginner.

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
23/03/2016, 22h56
patricktoulon

re

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
23/03/2016, 23h05
Beginner.

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 !
23/03/2016, 23h11
Beginner.

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

Et moi j'ai copié/collé ton code...
23/03/2016, 23h18
Beginner.

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
23/03/2016, 23h20
patricktoulon

re

puré ya des jours ou je ferais mieux d'arrêter d'arrêter moi :ptdr: 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
23/03/2016, 23h26
Beginner.

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...
23/03/2016, 23h45
Beginner.

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...

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 :mouarf:

Code:

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>

23/03/2016, 23h54
Beginner.

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>
24/03/2016, 00h07
patricktoulon

re

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é :ptdr:

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 :P:ccool::ccool:
24/03/2016, 00h12
Beginner.

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...

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:

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?

24/03/2016, 10h10
mathieu

Citation:

Envoyé par patricktoulon

sans doute un soucis de syntaxe encore

non, je pense plutôt à un soucis de sommeil encore une fois ;-)
regardez où est l'accolade d'ouverture de la fonction changeColor2
24/03/2016, 10h14
patricktoulon

re

bonjour Mathieu
oui j'avais trouvé entre temps

c'est bizarre plus c'est répétitif plus on fait des erreurs

Merci ;)
24/03/2016, 17h50
patricktoulon

re

Merci Beginner et Mathieu c'est le top ca fonctionne nickel

sujet résolu
merci encore
24/03/2016, 19h40
Beginner.

De rien ! Tant mieux si ça marche.

Et merci aussi à toi car c'était intéressant, ça m'a fait un exercice pratique...

1 pièce(s) jointe(s)

Bonjour beginner
j'ai a nouveau un soucis que je ne comprends pas

je cherche a envoyer l'id dans un input text et dans la console il me dit que "GetElementById" n'est pas géré ????????
une idée???

Code:

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
<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)
{
 elem = document.elementFromPoint(a,b );   
 
  if(elem === null){
    alert("null !!!");
    return;
  }     
    else {
       elem.style.color = newColor;
       var msg = "balise : " + elem.tagName + "  id = " + elem.id
       var nom=elem.id;
       alert(nom);
      document.GetElementById("b").innerText= nom;
    }
}
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',310,90);">vert</button>
<p id="xy">xy</p>
 <input type="text"  id="b" style="position:absolute;left:0px;top:700px" />  
</body>
</html>

Pièce jointe 205030

25/03/2016, 18h59
Beginner.

Salut,

Voilà j'ai corrigé ici : http://jsbin.com/rahozetila/edit?html,console,output

Apparemment, il fallait écrire : document.getElementById("b").value = nom ;

C'est un g minuscule...

PS : Par contre chez moi il n'affiche pas le message d'erreur en français, tu as configuré d'une certaine manière ? Et je vois qu'il affiche des nombres décimaux pour les coordonnées ce qui est étrange...
25/03/2016, 19h22
patricktoulon

re

Bonjour beginner
pure a balader entre VBA vbs VB et javascript je m'y retrouve plus moi :ptdr::ptdr:

je te remercie

pour l'affichage en Français je sais pas j'ai simplement cliquer sur un de tes lien jsbin.com et changer mon code a gauche et tester et afficher console

je test avec IE 11 c'est peut être cela
ou alors comme je suis pas enregistré sur jsbin je peut l'avoir qu'en Français automatiquement non?
25/03/2016, 19h45
Beginner.

Ah oui c'est difficile de ne pas s’emmêler les pinceaux quand on pratique plusieurs langages en même temps...

Ok merci, je vais voir pour la configuration...