files/fr/web/api/uievent/layerx/index.html


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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

---
title: event.layerX
slug: Web/API/UIEvent/layerX
tags:
  - API
  - DOM
  - Propriété
  - Reference
  - UIEvent
  - lecture seule
translation_of: Web/API/UIEvent/layerX
---
<p>{{APIRef("DOM Events")}} {{Non-standard_header}}</p>

<p>La propriété en lecture seule <code><strong>UIEvent.layerX</strong></code> retourne la coordonnée horizontale de l'évènement relativement à la couche en cours.</p>

<p>Cette propriété prend en compte le défilement de la page, et retourne une valeur relative à l'ensemble du document, à moins que l'évènement ne se soit produit à l'intérieur d'un élément positionné, auquel cas la valeur retournée est relative au coin supérieur gauche de l'élément positionné.</p>

<h2 id="Syntax" name="Syntax"><strong>Syntaxe</strong></h2>

<pre>var <em>posx</em> = <em>event</em>.layerX</pre>

<ul>
 <li><em><code>posx</code></em> est une valeur entière en pixels pour la coordonnée x du pointeur de la souris, lorsque l'évènement souris est déclenché.</li>
</ul>

<h2 id="Syntax" name="Syntax"><strong>Exemples</strong></h2>

<pre class="eval">&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Exemple pageX\pageY &amp; layerX\layerY&lt;/title&gt;

&lt;script type="text/javascript"&gt;

function montrerCoords(evt){
  var form = document.forms.form_coords;
  var parent_id = evt.target.parentNode.id;
  form.parentId.value = parent_id;
  form.pageXCoords.value = evt.pageX;
  form.pageYCoords.value = evt.pageY;
  form.layerXCoords.value = evt.layerX;
  form.layerYCoords.value = evt.layerY;
}
&lt;/script&gt;

&lt;style type="text/css"&gt;

 #d1 {
  border: solid blue 1px;
  padding: 20px;
 }

 #d2 {
  position: absolute;
  top: 180px;
  left: 80%;
  right:auto;
  width: 40%;
  border: solid blue 1px;
  padding: 20px;
 }

 #d3 {
  position: absolute;
  top: 240px;
  left: 20%;
  width: 50%;
  border: solid blue 1px;
  padding: 10px;
 }

&lt;/style&gt;
&lt;/head&gt;

&lt;body onmousedown="montrerCoords(event)"&gt;

&lt;p&gt;Pour afficher les coordonnées de la souris, veuillez cliquer quelque part sur la page.&lt;/p&gt;

&lt;div id="d1"&gt;
&lt;span&gt;Cette div n'est pas positionnée : cliquer dedans renverra des valeurs layerX/layerY identiques à celles de pageX/PageY.&lt;/span&gt;
&lt;/div&gt;

&lt;div id="d2"&gt;

&lt;span&gt;Cette div est positionnée : cliquer dedans renverra des valeurs layerX/layerY
relatives à son coin supérieur. Notez que les valeurs de pageX\pageY sont toujours relatives au document, ce qui inclue le défilement dans la page.&lt;/span&gt;

&lt;span&gt;Un peu de défilement ! C'est un div positionné : le clic renverra des valeurs layerX/layerY relative à son coin supérieur gauche. Notez que les valeurs de pageX\pageY sont toujours relatives au document, ce qui inclue le défilement dans la page.&lt;/span&gt;

&lt;/div&gt;

&lt;div id="d3"&gt;
&lt;form name="form_coords" id="form1"&gt;
 Id de l'élément parent : &lt;input type="text" name="parentId" size="7" /&gt;&lt;br /&gt;
 pageX:&lt;input type="text" name="pageXCoords" size="7" /&gt;
 pageY:&lt;input type="text" name="pageYCoords" size="7" /&gt;&lt;br /&gt;
 layerX:&lt;input type="text" name="layerXCoords" size="7" /&gt;
 layerY:&lt;input type="text" name="layerYCoords" size="7" /&gt;
&lt;/form&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>

<h2 id="Spécifications">Spécifications</h2>

<p><em>Cette propriété ne fait partie d'aucune spécification.</em></p>

<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>

<p>{{Compat("api.UIEvent.layerX")}}</p>