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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
|
---
title: MouseEvent.clientX
slug: Web/API/MouseEvent/clientX
translation_of: Web/API/MouseEvent/clientX
---
<p>{{APIRef("DOM Events")}}</p>
<p>O <strong><code>clientX</code></strong> é uma propriedade somente de leitura da interface {{domxref("MouseEvent")}} que fornece as coordenadas horizontais dentro da área do aplicativo do cliente em que o evento ocorreu (diferente das coordenadas dentro da página). Por exemplo, clicando no canto superior esquerdo da área do cliente sempre irá resultar em um evento de mouse com um valor <code>clientX</code> de 0, independentemente se a página foi rolada horizontalmente. Originalmente, essa propriedade era definida como o número inteiro <code>long</code>. O Módulo de Visualização CSSOM o redefiniu como a fração<code>double</code>. Veja a seção de compatibilidade do Navegador para detalhes.</p>
<h2 id="Sintaxe">Sintaxe</h2>
<pre class="syntaxbox">var <em>x</em> = <em>instanceOfMouseEvent</em>.clientX
</pre>
<h3 id="Valor_de_retorno">Valor de retorno</h3>
<p>Um número</p>
<h2 id="Example" name="Example">Exemplo</h2>
<pre class="brush:html"><!DOCTYPE html>
<html>
<head>
<title>clientX/clientY example</title>
<script>
function showCoords(evt){
alert(
"clientX value: " + evt.clientX + "\n" +
"clientY value: " + evt.clientY + "\n"
);
}
</script>
</head>
<body onmousedown="showCoords(event)">
<p>Para mostrar as coordenadas do mouse em qualquer lugar da página.</p>
</body>
</html>
</pre>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Status</th>
<th scope="col">Comentário</th>
</tr>
<tr>
<td>{{SpecName('CSSOM View','#dom-mouseevent-clientx', 'clientX')}}</td>
<td>{{Spec2('CSSOM View')}}</td>
<td>Redefine {{domxref("MouseEvent")}} de<code>long</code> para <code>double</code>. </td>
</tr>
<tr>
<td>{{SpecName('DOM3 Events','#widl-MouseEvent-clientX','MouseEvent.clientX')}}</td>
<td>{{Spec2('DOM3 Events')}}</td>
<td>Nenhuma mudança de {{SpecName('DOM2 Events')}}.</td>
</tr>
<tr>
<td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.clientX')}}</td>
<td>{{Spec2('DOM2 Events')}}</td>
<td>Definição inicial.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade com Navegadores</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Suporte básico</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown()}}</td>
<td>6</td>
<td>{{CompatVersionUnknown()}}</td>
<td>{{CompatVersionUnknown()}}</td>
</tr>
<tr>
<td>Redefinido de <code>long</code> para <code>double</code></td>
<td>{{CompatChrome(56)}}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Android Webview</th>
<th>Chrome for Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Suporte básico</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
<tr>
<td>Redefinido de <code>long</code> para <code>double</code></td>
<td>{{CompatChrome(56)}}</td>
<td>{{CompatChrome(56)}}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="See_also" name="See_also">Veja também</h2>
<ul>
<li>{{ domxref("MouseEvent") }}</li>
<li>{{domxref("MouseEvent.clientY","clientY")}}</li>
<li>{{domxref("MouseEvent.screenX","screenX")}} / {{domxref("MouseEvent.screenY","screenY")}}</li>
</ul>
|
