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
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
|
---
title: TouchEvent
slug: Web/API/TouchEvent
translation_of: Web/API/TouchEvent
---
<p>{{ APIRef("Touch Events") }}</p>
<p>La interfaz <strong><code>TouchEvent</code></strong> representa un evento enviado cuando cambia el estado de los contactos con una superficie sensible al tacto. Esta superficie puede ser una pantalla táctil o un trackpad, por ejemplo. El evento puede describir uno o mas puntos de contacto con la pantalla e incluye soporte para detectar el movimiento, adición y remoción de puntos de contacto, etc.</p>
<p>Los toques pueden ser representados por el objeto {{ domxref("Touch") }}, cada toque es descrito por una posición, tamaño y forma, cantidad de presión, y el elemento que se presiona. Los toques son almacenados en el objeto {{ domxref("TouchList") }}</p>
<p>Constructor</p>
<dl>
<dt>{{domxref("TouchEvent.TouchEvent", "TouchEvent()")}}</dt>
<dd>Crea un objeto Touch<code>Event</code>.</dd>
</dl>
<h2 id="Propiedades">Propiedades</h2>
<p><em>Esta interfaz hereda propiedades de sus padres {{domxref("UIEvent")}} y {{domxref("Event")}}.</em></p>
<dl>
<dt>{{ domxref("TouchEvent.altKey") }} {{readonlyInline}}</dt>
<dd>Un valor Booleano indicando si la tecla alt estaba pulsada cuando el evento touch fue lanzado.</dd>
<dt>{{ domxref("TouchEvent.changedTouches") }} {{readonlyInline}}</dt>
<dd>Una lista {{ domxref("TouchList") }} objetos {{ domxref("Touch") }} representan puntos de contacto individuales cuyos estados cambiaron entre el evento touch previo y este. </dd>
<dt>{{ domxref("TouchEvent.ctrlKey") }} {{readonlyInline}}</dt>
<dd>Un valor booleano que indica si la tecla de control estaba pulsada o no cuando el evento touch se disparó.</dd>
<dt>{{ domxref("TouchEvent.metaKey") }} {{readonlyInline}}</dt>
<dd>Un valor Boleano que indica si la tecla meta estaba apagada o no cuando el evento touch se disparó.</dd>
<dt>{{ domxref("TouchEvent.shiftKey") }} {{readonlyInline}}</dt>
<dd>Un valor Boleano que indica si la techa shift estaba apagado(presionada) cuando el evento touch se disparó.</dd>
<dt>{{ domxref("TouchEvent.targetTouches") }}{{readonlyInline}}</dt>
<dd>A {{ domxref("TouchList") }} of all the {{ domxref("Touch") }} objects that are both currently in contact with the touch surface <strong>and</strong> were also started on the same element that is the target of the event.</dd>
<dt>{{ domxref("TouchEvent.touches") }} {{readonlyInline}}</dt>
<dd>A {{ domxref("TouchList") }} of all the {{ domxref("Touch") }} objects representing all current points of contact with the surface, regardless of target or changed status.</dd>
</dl>
<h2 id="Tipos_de_evento_táctiles">Tipos de evento táctiles</h2>
<p>Hay varios tipos de eventos que pueden ser disparados (activados) para indicar que han ocurrido cambios relacionados con el contacto. Puede determinar cuál de estos ha ocurrido mirando la propiedad {{domxref ("event.type", "TouchEvent.type")}} del evento.</p>
<div class="note"><strong>Nota:</strong> Es importante observar que en muchos casos, Los eventos táctiles y de mouse se envían (para permitir que el código no táctil específico aún interactúe con el usuario). Si usa eventos táctiles, debe llamar a {{domxref ("event.preventDefault ()")}} para evitar que también se envíe el evento del mouse.</div>
<h3 id="event(touchstart)">{{event("touchstart")}}</h3>
<p>Sent when the user places a touch point on the touch surface. The event's target will be the {{ domxref("element") }} in which the touch occurred.</p>
<h3 id="event(touchend)">{{event("touchend")}}</h3>
<p>Sent when the user removes a touch point from the surface (that is, when they lift a finger or stylus from the surface). This is also sent if the touch point moves off the edge of the surface; for example, if the user's finger slides off the edge of the screen.</p>
<p>The event's target is the same {{ domxref("element") }} that received the <code>touchstart</code> event corresponding to the touch point, even if the touch point has moved outside that element.</p>
<p>The touch point (or points) that were removed from the surface can be found in the {{ domxref("TouchList") }} specified by the <code>changedTouches</code> attribute.</p>
<h3 id="event(touchmove)">{{event("touchmove")}}</h3>
<p>Sent when the user moves a touch point along the surface. The event's target is the same {{ domxref("element") }} that received the <code>touchstart</code> event corresponding to the touch point, even if the touch point has moved outside that element.</p>
<p>This event is also sent if the values of the radius, rotation angle, or force attributes of a touch point change.</p>
<div class="note"><strong>Note:</strong> The rate at which <code>touchmove</code> events is sent is browser-specific, and may also vary depending on the capability of the user's hardware. You must not rely on a specific granularity of these events.</div>
<h3 id="event(touchcancel)">{{event("touchcancel")}}</h3>
<p>Sent when a touch point has been disrupted in some way. There are several possible reasons why this might happen (and the exact reasons will vary from device to device, as well as browser to browser):</p>
<ul>
<li>An event of some kind occurred that canceled the touch; this might happen if a modal alert pops up during the interaction.</li>
<li>The touch point has left the document window and moved into the browser's UI area, a plug-in, or other external content.</li>
<li>The user has placed more touch points on the screen than can be supported, in which case the earliest {{ domxref("Touch") }} in the {{ domxref("TouchList") }} gets canceled.</li>
</ul>
<h2 id="GlobalEventHandlers">GlobalEventHandlers</h2>
<p>{{SeeCompatTable}}</p>
<dl>
<dt>{{ domxref("GlobalEventHandlers.ontouchstart") }} {{experimental_inline}}</dt>
<dd>A {{domxref("GlobalEventHandlers","global event handler")}} for the {{event("touchstart")}} event.</dd>
<dt>{{ domxref("GlobalEventHandlers.ontouchend") }} {{experimental_inline}}</dt>
<dd>A {{domxref("GlobalEventHandlers","global event handler")}} for the {{event("touchend")}} event.</dd>
<dt>{{ domxref("GlobalEventHandlers.ontouchmove") }} {{experimental_inline}}</dt>
<dd>A {{domxref("GlobalEventHandlers","global event handler")}} for the {{event("touchmove")}} event.</dd>
<dt>{{ domxref("GlobalEventHandlers.ontouchcancel") }} {{experimental_inline}}</dt>
<dd>A {{domxref("GlobalEventHandlers","global event handler")}} for the {{event("touchcancel")}} event.</dd>
</dl>
<h2 id="Ejemplo">Ejemplo</h2>
<p>See the <a href="/en/DOM/Touch_events#Example" title="en/DOM/Touch events#Example">example on the main Touch events article</a>.</p>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('Touch Events 2','#touchevent-interface', 'TouchEvent')}}</td>
<td>{{Spec2('Touch Events 2')}}</td>
<td>Added <code>ontouchstart</code>, <code>ontouchend</code>, <code>ontouchmove</code>, <code>ontouchend</code> global attribute handlers</td>
</tr>
<tr>
<td>{{SpecName('Touch Events', '#touchevent-interface', 'TouchEvent')}}</td>
<td>{{Spec2('Touch 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>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>{{CompatChrome("22.0")}}</td>
<td>{{CompatGeckoDesktop("18.0")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Android Webview</th>
<th>Chrome for Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>Firefox OS</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("6.0")}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>11</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td>TouchEvent()</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="See_also">See also</h2>
<ul>
<li>{{domxref("Touch_events","Touch Events Overview")}}</li>
<li>{{domxref("GestureEvent")}}</li>
<li>{{domxref("MSGestureEvent")}}</li>
</ul>
|
