aboutsummaryrefslogtreecommitdiff
path: root/files/es/web/api/wheelevent/index.html
blob: c53bbb87ccce3e9724056e0cc86fdef72a9f77c9 (plain)
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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
---
title: WheelEvent
slug: Web/API/WheelEvent
tags:
  - API
  - DOM
  - Interface
  - Referencia
  - WheelEvent
  - eventos
translation_of: Web/API/WheelEvent
---
<p>{{APIRef("DOM Events")}}</p>

<p>El interface <strong><code>WheelEvent</code></strong> retrata los eventos que ocurren cuando el usuario mueve la rueda del ratón o de un dispositivo similar.</p>

<div class="note">
<p><strong>Esta es la forma estándar de usar el evento wheel.</strong></p>

<p>Antiguas versiones de navegadores implementaron dos formas no-estándar y no-compatibles-entre-navegadores, los interfaces {{ domxref("MouseWheelEvent") }} y {{domxref("MouseScrollEvent")}}. Utilice este interfaz y evite los dos últimos.</p>
</div>

<p>{{InheritanceDiagram}}</p>

<h2 id="Constructor">Constructor</h2>

<dl>
 <dt>{{domxref("WheelEvent.WheelEvent", "WheelEvent()")}}</dt>
 <dd>Crea el objeto <code>WheelEvent</code>.</dd>
</dl>

<h2 id="Propiedades">Propiedades</h2>

<p><em>Este interfaz hereda propiedades de estos padres<em>, {{domxref("MouseEvent")}}, {{domxref("UIEvent")}} y {{domxref("Event")}}.</em></em></p>

<dl id="raw_prop">
 <dt>{{domxref("WheelEvent.deltaX")}} {{readonlyinline}}</dt>
 <dd>Devuelve un doble (número de doble precisión) que representa la cantidad de desplazamiento horizontal.</dd>
 <dt>{{domxref("WheelEvent.deltaY")}} {{readonlyinline}}</dt>
 <dd>Devuelve un doble que representa la cantidad de desplazamiento vertical.</dd>
 <dt>{{domxref("WheelEvent.deltaZ")}} {{readonlyinline}}</dt>
 <dd>Devuelve un doble que representa la cantidad de desplazamiento del eje-z.</dd>
 <dt>{{domxref("WheelEvent.deltaMode")}} {{readonlyinline}}</dt>
 <dd>Devuelve un entero largo sin signo que representa la unidad manejada por los valores de cantidad de desplazamiento delta. Los valores permitidos son:
 <table class="standard-table">
  <tbody>
   <tr>
    <td class="header">Constant</td>
    <td class="header">Value</td>
    <td class="header">Description</td>
   </tr>
   <tr>
    <td><code>DOM_DELTA_PIXEL</code></td>
    <td><code>0x00</code></td>
    <td>Los valores delta están especificados en pixeles.</td>
   </tr>
   <tr>
    <td><code>DOM_DELTA_LINE</code></td>
    <td><code>0x01</code></td>
    <td>Los valores delta están especificados en líneas.</td>
   </tr>
   <tr>
    <td><code>DOM_DELTA_PAGE</code></td>
    <td><code>0x02</code></td>
    <td>Los valores delta están especificados en páginas.</td>
   </tr>
  </tbody>
 </table>
 </dd>
</dl>

<h2 id="Métodos">Métodos</h2>

<p><em>Este interfaz no define ningún método, pero hereda métodos de estos padres, {{domxref("MouseEvent")}}, {{domxref("UIEvent")}} y {{domxref("Event")}}.</em></p>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estatus</th>
   <th scope="col">Comentario</th>
  </tr>
  <tr>
   <td>{{SpecName('DOM3 Events','#interface-WheelEvent','WheelEvent')}}</td>
   <td>{{Spec2('DOM3 Events')}}</td>
   <td>Definición inicial.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_en_navegadores">Compatibilidad en 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 (WebKit)</th>
  </tr>
  <tr>
   <td>Implementación básica</td>
   <td>31</td>
   <td>{{ CompatVersionUnknown }}</td>
   <td>{{ CompatGeckoDesktop("17.0") }}</td>
   <td>{{ CompatIE("9.0") }}</td>
   <td>18</td>
   <td>7.0</td>
  </tr>
  <tr>
   <td><code>window.WheelEvent</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{ CompatVersionUnknown }}</td>
   <td>{{ CompatGeckoDesktop("17.0") }}</td>
   <td>{{ CompatIE("9.0") }}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}} [1]</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Implementación básica</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{ CompatGeckoMobile("17.0") }}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>window.WheelEvent</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{ CompatGeckoMobile("17.0") }}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Safari no implementa actualmente <code>WheelEvent</code> actually; sin embargo este devuelve un objeto para <code>window.WheelEvent</code>.</p>

<h2 class="note" id="Ver_también">Ver también</h2>

<ul>
 <li>{{ event("wheel") }}</li>
 <li>Interfaces reemplazados por este:
  <ul>
   <li>Objeto del evento de la rueda del ratón legado de la plataforma Gecko: {{ domxref("MouseScrollEvent") }}</li>
   <li>Navegadores no-gecko, objeto del evento de la rueda del ratón legado: {{ domxref("MouseWheelEvent") }}</li>
  </ul>
 </li>
</ul>