Eventos de toque

  • Enlace amigable (slug) de la revisión: DOM/Touch_events
  • Título de la revisión: Touch events
  • Id de la revisión: 347475
  • Creada:
  • Creador: jvmjunior
  • ¿Es la revisión actual? No
  • Comentario Translation to Spanish

Contenido de la revisión

{{ DevDerbyPromoHeader("touch events") }}

Con el fin de proporcionar soporte de calidad para usuarios de interfaces táctiles, los eventos táctiles dan la posibilidad de interpretar la actividad de los dedos en pantallas táctiles o trackpads.

Definiciones

Superficie
La superficie sensible al tacto. Esta puede ser una pantalla o un trackpad.
Punto de toque
Un punto de contacto con la superficie. Esto podría ser un dedo (o un codo, oreja, nariz, o lo que sea, pero probablemente un dedo) o algo por el estilo.

Interfaces

{{ domxref("TouchEvent") }}
Representa un evento que ocurre cuando el estado de los toques en la superficie cambian.
{{ domxref("Touch") }}
Representa un evento que ocurre cuando el estado de los toques en la superficie cambian.
{{ domxref("TouchList") }}
Representa un evento ocurre cuando el estado de los toques en la superficie cambian.
{{ domxref("DocumentTouch") }}
Contiene métodos de conveniencia para crear {{ domxref("Touch") }} y {{ domxref("TouchList") }} objetos.

Ejemplo

Este ejemplo muestra múltiples puntos de toques al mismo tiempo, permitiendo al usuario dibujar en un {{ HTMLElement("canvas") }} con más de un dedo a la vez. Esto funciona solamente en un navegador que soporta eventos táctiles.

Nota: El texto de abajo usa el término "dedo" cuando describe el contacto con la superficie, pero esto podría, por supuesto, ser también un estilo u otro método de contacto.

Confiturando los eventos de manipulación

Cuando la página carga, la función startup() mostrada a continuación es llamada por nuestro elemento {{ HTMLElement("body") }} atributo onload.

function startup() {
  var el = document.getElementsByTagName("canvas")[0];
  el.addEventListener("touchstart", handleStart, false);
  el.addEventListener("touchend", handleEnd, false);
  el.addEventListener("touchcancel", handleCancel, false);
  el.addEventListener("touchleave", handleLeave, false);
  el.addEventListener("touchmove", handleMove, false);
}

Esto simplemente configura todos los eventos que escuchan nuestro elemento {{ HTMLElement("canvas") }}  por lo tanto podemos manejar todos los eventos que se produzcan.

Seguimiento de nuevos toques

Cuando un evento touchstart ocurre, indicando que un nuevo toque sobre la superficie se ha producido, la función handleStart() a continuación es llamada.

function handleStart(evt) {
  evt.preventDefault();
  var el = document.getElementsByTagName("canvas")[0];
  var ctx = el.getContext("2d");
  var touches = evt.changedTouches;
        
  for (var i=0; i<touches.length; i++) {
    ongoingTouches.push(touches[i]);
    var color = colorForTouch(touches[i]);
    ctx.fillStyle = color;
    ctx.fillRect(touches[i].pageX-2, touches[i].pageY-2, 4, 4);
  }
}

Estas llamadas {{ domxref("event.preventDefault()") }} mantienen al navegador conociendo el evento de toque (esto también previene que un evento del ratón o mouse sea entregado). Entonces obtenemos el contexto y lanzamos la lista de puntos de contacto cambiada a las propiedades de los eventos {{ domxref("TouchEvent.changedTouches") }} .

Después que, hemos iterado sobre todo el objeto {{ domxref("Touch") }} en la lista, poniendolo en una matriz de puntos de toque activos y dibujando el punto de inicio para formar el dibujo como un pequeño rectángulo; estamos usando una línea de 4 pixeles de ancho, por tanto estamos dibujando un cuadro de 4 por 4 pixeles como punto de consistencia.

Dibujando el movimiento de toques

Cada vez que uno o más dedos se mueven, un evento touchmove es entregado,  resultando en nuestra función handleMove() siendo llamada. La responsabilidad en este ejemplo es actualizar la información de toque en la memoria caché y dibujar una línea desde la posición previa a la posición actual en cada toque.

function handleMove(evt) {
  evt.preventDefault();
  var el = document.getElementsByTagName("canvas")[0];
  var ctx = el.getContext("2d");
  var touches = evt.changedTouches;
  
  ctx.lineWidth = 4;
        
  for (var i=0; i<touches.length; i++) {
    var color = colorForTouch(touches[i]);
    var idx = ongoingTouchIndexById(touches[i].identifier);

    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
    ctx.lineTo(touches[i].pageX, touches[i].pageY);
    ctx.closePath();
    ctx.stroke();
    ongoingTouches.splice(idx, 1, touches[i]);  // swap in the new touch record
  }
}

Esto se repite también en los toques cambiados, pero se ve en nuestra matriz de información de toques cacheada la información previa de cada toque  con el fin de determinar los puntos de inicio para cada nuevo segmento de línea de toques para ser dibujada. Esto se hace mirando cada propiedad de los toques {{ domxref("Touch.identifier") }} . Esta propiedad es un único entero para cada toque, y sigue siendo consistente para cada evento durante la duración del contacto de cada dedo con la superficie.

Esto nos da las coordenadas de la posición previa de cada toque y usa el apropiado método de contexto para dibujar un segmento de línea uniendo dos posiciones a la vez.

Después de dibujar la línea, llamammos a  Array.splice() para reemplazar la información previa del punto de toque con la información actualen la matriz ongoingTouches.

Manejo del final de un toque

Cuando el usuario levanta un dedo de la superficie, un evento touchend es enviado.  De igual manera, si el dedo se desliza fuera de nuestro lienzo, obtenemos un evento touchleave. Manejamos ambos casos de la misma manera: llamando a la función handleEnd() de abajo.  Este trabajo es para dibujar el último segmiento de línea para cada toque que ha finalizado y remueve el punto de toque de la lista de toques en marcha.

function handleEnd(evt) {
  evt.preventDefault();
  var el = document.getElementsByTagName("canvas")[0];
  var ctx = el.getContext("2d");
  var touches = evt.changedTouches;
  
  ctx.lineWidth = 4;
        
  for (var i=0; i<touches.length; i++) {
    var color = colorForTouch(touches[i]);
    var idx = ongoingTouchIndexById(touches[i].identifier);
    
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.moveTo(ongoingTouches[i].pageX, ongoingTouches[i].pageY);
    ctx.lineTo(touches[i].pageX, touches[i].pageY);
    ongoingTouches.splice(i, 1);  // remove it; we're done
  }
}

Esto es muy similar a la función previa; la única diferencia real es que cuando llamamos a  Array.splice(), simplemente remueve la antigua entrada de la lista de toques en marcha, sin añadir en la información actualizada. El resultado de esto es que detenemos  The result is que detenemos el seguimiento del punto de toque.

Manejo de los toques cancelados

Si el dedo del usuario se equivoca en la Interfaz del navegador, o el toque necesita ser cancelado, el evento touchcancel es enviado, y llamamos a la función handleCancel() abajo.

function handleCancel(evt) {
  evt.preventDefault();
  var touches = evt.changedTouches;
  
  for (var i=0; i<touches.length; i++) {
    ongoingTouches.splice(i, 1);  // remove it; we're done
  }
}

Desde que la idea es inmediatamente cancelar el toque, simplemente lo removemos de la lista de toques en marcha sin dibujar un segmento final de línea

Funciones de conveniencia

Este ejemplo usa dos funciones convenientes que deben mirarse brebemente para ayudar a que el resto del código sea más claro.

Seleccionando un color para cada toque

Con el fin de hacer que cada dibujo de toque se vea diferente, la función  colorForTouch() es usada para elegir un color basado en el identificador único de toque. Este identificador estará siempre entre 0 y un valor menos que el número de toques activos. Puesto que es muy improbable que alguna persona con más de 16 dedos use este demo, convertimos estos directamente en colores de escalas grises.

function colorForTouch(touch) {
  var id = touch.identifier;
  id = id.toString(16); // make it a hex digit
  return "#" + id + id + id;
}

El resultado de esta función es un string o cadena que puede ser usada cuando se llame a funciones {{ HTMLElement("canvas") }} para configurar los colores de dibujos. Por ejemplo, para un valor {{ domxref("Touch.identifier") }}  de 10, el resultado string o cadena es "#aaa".

Encontrando un toque continuo

La función ongoingTouchIndexById() abajo explora mediante la matriz ongoingTouches para encontrar el toque que coincida con el identificador dado, luego retorna que los índices de toques en la matriz.

function ongoingTouchIndexById(idToFind) {
  for (var i=0; i<ongoingTouches.length; i++) {
    var id = ongoingTouches[i].identifier;
    
    if (id == idToFind) {
      return i;
    }
  }
  return -1;    // not found
}

{{ DOMLiveSample("touchevents.html") }}

Consejos adicionales

Esta sección provee consejos adicionales sobre como manejar los eventos de toques en tu aplicación web.

Manejando los clics

Desde la llamada preventDefault() en un touchstart o el primer evento touchmove de una serie  impide que los eventos correspondientes eventos del mouse o ratón se disparen, es común llamar a preventDefault() en touchmove en lugar de touchstart. De esta manera, los eventos del ratón pueden todavía ser disparados y cosas como enlaces siguen funcionando. Alternativamente,  algunos frameworks tienen que referirse a eventos de toque como para eventos de ratón para este mismo propósito. (Este ejemplo es muy simplificado y podria resultar en un extraño comportamiento. Solo se diseño como guía).

function onTouch(evt) {
  evt.preventDefault();
  if (evt.touches.length > 1 || (evt.type == "touchend" && evt.touches.length > 0))
    return;

  var newEvt = document.createEvent("MouseEvents");
  var type = null;
  var touch = null;
  switch (event.type) {
    case "touchstart": type = "mousedown"; touch = event.changedTouches[[0];
    case "touchmove":  type = "mousemove"; touch = event.changedTouches[[0];
    case "touchend":   type = "mouseup"; touch = event.changedTouches[0];
  }
  newEvt.initMouseEvent(type, true, true, event.originalTarget.ownerDocument.defaultView, 0,
    touch.screenX, touch.screenY, touch.clientX, touch.clientY,
    evt.ctrlKey, evt.altKey, evt.shirtKey, evt.metaKey, 0, null);
  event.originalTarget.dispatchEvent(newEvt);
}

Llamando a preventDefault() solo en un segundo toque

Una cosa para prevenir cosas como pinchZoom en una página es llamar a preventDefault() en el segundo toque de una serie. Este comportamiento no está bien definido en los eventos de toque, y resulta en diferentes comportamientos en diferentes navegadores (osea iOS evitará el zoom o acercamiento pero permitirá vista panorámica con ambos dedos. Android permitirá zoom o acercamiento pero no una panorámica. Opera and Firefox actualmente evita panorámica y zoom o acercamiento). Actualmente, no se recomienda depender de ningún comportamiento en particular en este caso,  Currently, its not recommended to depend on any particular behavior in this case, si no mas bien depender de una meta vista para evitar el zoom.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{ CompatChrome("22.0") }} {{ CompatGeckoDesktop("18.0") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatGeckoMobile("6.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatVersionUnknown() }}

Gecko notes

The dom.w3c_touch_events.enabled preference can be used to enable and disable support for standard touch events; by default, they're enabled.

{{ gecko_callout_heading("12.0") }}

Prior to Gecko 12.0 {{ geckoRelease("12.0") }}, Gecko did not support multi-touch; only one touch at a time was reported.

Note: Prior to Gecko 6.0 {{ geckoRelease("6.0") }}, Gecko offered a proprietary touch event API. That API is now deprecated; you should switch to this one."

Fuente de la revisión

<p>{{ DevDerbyPromoHeader("touch events") }}</p>
<p>Con el fin de proporcionar soporte de calidad para usuarios de interfaces táctiles, los eventos táctiles dan la posibilidad de interpretar la actividad de los dedos en pantallas táctiles o trackpads.</p>
<h2 id="Definitions">Definiciones</h2>
<dl>
  <dt>
    Superficie</dt>
  <dd>
    La superficie sensible al tacto. Esta puede ser una pantalla o un trackpad.</dd>
</dl>
<dl>
  <dt>
    <span style="font-weight: bold;">Punto de toque</span></dt>
  <dd>
    Un punto de contacto con la superficie. Esto podría ser un dedo (o un codo, oreja, nariz, o lo que sea, pero probablemente un dedo) o algo por el estilo.</dd>
</dl>
<h2 id="Interfaces">Interfaces</h2>
<dl>
  <dt>
    {{ domxref("TouchEvent") }}</dt>
  <dd>
    Representa un evento que ocurre cuando el estado de los toques en la superficie cambian.</dd>
  <dt>
    {{ domxref("Touch") }}</dt>
  <dd>
    Representa un evento que ocurre cuando el estado de los toques en la superficie cambian.</dd>
  <dt>
    {{ domxref("TouchList") }}</dt>
  <dd>
    Representa un evento ocurre cuando el estado de los toques en la superficie cambian.</dd>
  <dt>
    {{ domxref("DocumentTouch") }}</dt>
  <dd>
    Contiene métodos de conveniencia para crear {{ domxref("Touch") }} y {{ domxref("TouchList") }} objetos.</dd>
</dl>
<h2 id="Example">Ejemplo</h2>
<p>Este ejemplo muestra múltiples puntos de toques al mismo tiempo, permitiendo al usuario dibujar en un {{ HTMLElement("canvas") }} con más de un dedo a la vez. Esto funciona solamente en un navegador que soporta eventos táctiles.</p>
<div class="note">
  <strong>Not</strong><strong>a:</strong> El texto de abajo usa el término "dedo" cuando describe el contacto con la superficie, pero esto podría, por supuesto, ser también un estilo u otro método de contacto.</div>
<h3 id="Setting_up_the_event_handlers">Confiturando los eventos de manipulación</h3>
<p>Cuando la página carga, la función <code>startup()</code> mostrada a continuación es llamada por nuestro elemento {{ HTMLElement("body") }} atributo <code>onload</code>.</p>
<pre class="brush: js">
function startup() {
  var el = document.getElementsByTagName("canvas")[0];
  el.addEventListener("touchstart", handleStart, false);
  el.addEventListener("touchend", handleEnd, false);
  el.addEventListener("touchcancel", handleCancel, false);
  el.addEventListener("touchleave", handleLeave, false);
  el.addEventListener("touchmove", handleMove, false);
}
</pre>
<p>Esto simplemente configura todos los eventos que escuchan nuestro elemento {{ HTMLElement("canvas") }}&nbsp; por lo tanto podemos manejar todos los eventos que se produzcan.</p>
<h3 id="Tracking_new_touches">Seguimiento de nuevos toques</h3>
<p>Cuando un evento <code>touchstart</code> ocurre, indicando que un nuevo toque sobre la superficie se ha producido, la función <code>handleStart()</code> a continuación es llamada.</p>
<pre class="brush: js">
function handleStart(evt) {
  evt.preventDefault();
  var el = document.getElementsByTagName("canvas")[0];
  var ctx = el.getContext("2d");
  var touches = evt.changedTouches;
        
  for (var i=0; i&lt;touches.length; i++) {
    ongoingTouches.push(touches[i]);
    var color = colorForTouch(touches[i]);
    ctx.fillStyle = color;
    ctx.fillRect(touches[i].pageX-2, touches[i].pageY-2, 4, 4);
  }
}
</pre>
<p>Estas llamadas {{ domxref("event.preventDefault()") }} mantienen al navegador conociendo el evento de toque (esto también previene que un evento del ratón o mouse sea entregado). Entonces obtenemos el contexto y lanzamos la lista de puntos de contacto cambiada a las propiedades de los eventos {{ domxref("TouchEvent.changedTouches") }} .</p>
<p>Después que, hemos iterado sobre todo el objeto {{ domxref("Touch") }} en la lista, poniendolo en una matriz de puntos de toque activos y dibujando el punto de inicio para formar el dibujo como un pequeño rectángulo; estamos usando una línea de 4 pixeles de ancho, por tanto estamos dibujando un cuadro de 4 por 4 pixeles como punto de consistencia.</p>
<h3 id="Drawing_as_the_touches_move">Dibujando el movimiento de toques</h3>
<p>Cada vez que uno o más dedos se mueven, un evento <code>touchmove</code> es entregado,&nbsp; resultando en nuestra función <code>handleMove()</code> siendo llamada. La responsabilidad en este ejemplo es actualizar la información de toque en la memoria caché y dibujar una línea desde la posición previa a la posición actual en cada toque.</p>
<pre class="brush: js">
function handleMove(evt) {
  evt.preventDefault();
  var el = document.getElementsByTagName("canvas")[0];</pre>
<pre class="brush: js">
  var ctx = el.getContext("2d");
  var touches = evt.changedTouches;
  
  ctx.lineWidth = 4;
        
  for (var i=0; i&lt;touches.length; i++) {
    var color = colorForTouch(touches[i]);
    var idx = ongoingTouchIndexById(touches[i].identifier);

    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
    ctx.lineTo(touches[i].pageX, touches[i].pageY);
    ctx.closePath();
    ctx.stroke();
    ongoingTouches.splice(idx, 1, touches[i]);  // swap in the new touch record
  }
}
</pre>
<p>Esto se repite también en los toques cambiados, pero se ve en nuestra matriz de información de toques cacheada la información previa de cada toque&nbsp; con el fin de determinar los puntos de inicio para cada nuevo segmento de línea de toques para ser dibujada. Esto se hace mirando cada propiedad de los toques {{ domxref("Touch.identifier") }} . Esta propiedad es un único entero para cada toque, y sigue siendo consistente para cada evento durante la duración del contacto de cada dedo con la superficie.</p>
<p>Esto nos da las coordenadas de la posición previa de cada toque y usa el apropiado método de contexto para dibujar un segmento de línea uniendo dos posiciones a la vez.</p>
<p>Después de dibujar la línea, llamammos a&nbsp; <a href="/en/JavaScript/Reference/Global_Objects/Array/splice" title="en/JavaScript/Reference/Global Objects/Array/splice"><code>Array.splice()</code></a> para reemplazar la información previa del punto de toque con la información actualen la matriz <code>ongoingTouches</code>.</p>
<h3 id="Handling_the_end_of_a_touch">Manejo del final de un toque</h3>
<p>Cuando el usuario levanta un dedo de la superficie, un evento <code>touchend</code> es enviado.&nbsp; De igual manera, si el dedo se desliza fuera de nuestro lienzo, obtenemos un evento <code>touchleave</code>. Manejamos ambos casos de la misma manera: llamando a la función <code>handleEnd()</code> de abajo.&nbsp; Este trabajo es para dibujar el último segmiento de línea para cada toque que ha finalizado y remueve el punto de toque de la lista de toques en marcha.</p>
<pre class="brush: js">
function handleEnd(evt) {
  evt.preventDefault();
  var el = document.getElementsByTagName("canvas")[0];</pre>
<pre class="brush: js">
  var ctx = el.getContext("2d");
  var touches = evt.changedTouches;
  
  ctx.lineWidth = 4;
        
  for (var i=0; i&lt;touches.length; i++) {
    var color = colorForTouch(touches[i]);
    var idx = ongoingTouchIndexById(touches[i].identifier);
    
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.moveTo(ongoingTouches[i].pageX, ongoingTouches[i].pageY);
    ctx.lineTo(touches[i].pageX, touches[i].pageY);
    ongoingTouches.splice(i, 1);  // remove it; we're done
  }
}
</pre>
<p>Esto es muy similar a la función previa; la única diferencia real es que cuando llamamos a&nbsp; <a href="/en/JavaScript/Reference/Global_Objects/Array/splice" title="en/JavaScript/Reference/Global Objects/Array/splice"><code>Array.splice()</code></a>, simplemente remueve la antigua entrada de la lista de toques en marcha, sin añadir en la información actualizada. El resultado de esto es que detenemos&nbsp; The result is que detenemos el seguimiento del punto de toque.</p>
<h3 id="Handling_canceled_touches">Manejo de los toques cancelados</h3>
<p>Si el dedo del usuario se equivoca en la Interfaz del navegador, o el toque necesita ser cancelado, el evento <code>touchcancel</code> es enviado, y llamamos a la función <code>handleCancel()</code> abajo.</p>
<pre class="brush: js">
function handleCancel(evt) {
  evt.preventDefault();
  var touches = evt.changedTouches;
  
  for (var i=0; i&lt;touches.length; i++) {
    ongoingTouches.splice(i, 1);  // remove it; we're done
  }
}
</pre>
<p>Desde que la idea es inmediatamente cancelar el toque, simplemente lo removemos de la lista de toques en marcha sin dibujar un segmento final de línea</p>
<h3 id="Convenience_functions">Funciones de conveniencia</h3>
<p>Este ejemplo usa dos funciones convenientes que deben mirarse brebemente para ayudar a que el resto del código sea más claro.</p>
<h4 id="Selecting_a_color_for_each_touch">Seleccionando un color para cada toque</h4>
<p>Con el fin de hacer que cada dibujo de toque se vea diferente, la función&nbsp; <code>colorForTouch()</code> es usada para elegir un color basado en el identificador único de toque. Este identificador estará siempre entre 0 y un valor menos que el número de toques activos. Puesto que es muy improbable que alguna persona con más de 16 dedos use este demo, convertimos estos directamente en colores de escalas grises.</p>
<pre class="brush: js">
function colorForTouch(touch) {
  var id = touch.identifier;
  id = id.toString(16); // make it a hex digit
  return "#" + id + id + id;
}
</pre>
<p>El resultado de esta función es un string o cadena que puede ser usada cuando se llame a funciones {{ HTMLElement("canvas") }} para configurar los colores de dibujos. Por ejemplo, para un valor {{ domxref("Touch.identifier") }}&nbsp; de 10, el resultado string o cadena es "#aaa".</p>
<h4 id="Finding_an_ongoing_touch">Encontrando un toque continuo</h4>
<p>La función <code>ongoingTouchIndexById()</code> abajo explora mediante la matriz <code>ongoingTouches</code> para encontrar el toque que coincida con el identificador dado, luego retorna que los índices de toques en la matriz.</p>
<pre class="brush: js">
function ongoingTouchIndexById(idToFind) {
  for (var i=0; i&lt;ongoingTouches.length; i++) {
    var id = ongoingTouches[i].identifier;
    
    if (id == idToFind) {
      return i;
    }
  }
  return -1;    // not found
}
</pre>
<p>{{ DOMLiveSample("touchevents.html") }}</p>
<h2 id="Additional_tips">Consejos adicionales</h2>
<p>Esta sección provee consejos adicionales sobre como manejar los eventos de toques en tu aplicación web.</p>
<h3 id="Handling_clicks">Manejando los clics</h3>
<p>Desde la llamada <code>preventDefault()</code> en un <code>touchstart</code> o el primer evento <code>touchmove</code> de una serie&nbsp; impide que los eventos correspondientes eventos del mouse o ratón se disparen, es común llamar a <code>preventDefault()</code> en <code>touchmove</code> en lugar de <code>touchstart</code>. De esta manera, los eventos del ratón pueden todavía ser disparados y cosas como enlaces siguen funcionando. Alternativamente,&nbsp; algunos frameworks tienen que referirse a eventos de toque como para eventos de ratón para este mismo propósito. (Este ejemplo es muy simplificado y podria resultar en un extraño comportamiento. Solo se diseño como guía).</p>
<pre class="brush: js">
function onTouch(evt) {
  evt.preventDefault();
  if (evt.touches.length &gt; 1 || (evt.type == "touchend" &amp;&amp; evt.touches.length &gt; 0))
    return;

  var newEvt = <a href="https://developer.mozilla.org/en/DOM/document.createEvent" rel="internal" title="en/DOM/document.createEvent">document.createEvent</a>("MouseEvents");
  var type = null;
  var touch = null;
  switch (event.type) {
    case "touchstart": type = "mousedown"; touch = event.changedTouches[[0];
    case "touchmove":  type = "mousemove"; touch = event.changedTouches[[0];
    case "touchend":   type = "mouseup"; touch = event.changedTouches[0];
  }
  newEvt.<strong>initMouseEvent</strong>(type, true, true, event.<code><a href="https://developer.mozilla.org/en/DOM/event.originalTarget" rel="custom">originalTarget</a>.ownerDocument.defaultView</code>, 0,
    touch.screenX, touch.screenY, touch.clientX, touch.clientY,
    evt.ctrlKey, evt.altKey, evt.shirtKey, evt.metaKey, 0, null);
  event.<code><a href="https://developer.mozilla.org/en/DOM/event.originalTarget" rel="custom">originalTarget</a></code>.<a href="https://developer.mozilla.org/en/DOM/element.dispatchEvent" rel="internal" title="en/DOM/element.dispatchEvent">dispatchEvent</a>(newEvt);
}
</pre>
<h3 id="Calling_preventDefault()_only_on_a_second_touch">Llamando a preventDefault() solo en un segundo toque</h3>
<p>Una cosa para prevenir cosas como <code>pinchZoom</code> en una página es llamar a <code>preventDefault()</code> en el segundo toque de una serie. Este comportamiento no está bien definido en los eventos de toque, y resulta en diferentes comportamientos en diferentes navegadores (osea iOS evitará el zoom o acercamiento pero permitirá vista panorámica con ambos dedos. Android permitirá zoom o acercamiento pero no una panorámica. Opera and Firefox actualmente evita panorámica y zoom o acercamiento). Actualmente, no se recomienda depender de ningún comportamiento en particular en este caso,&nbsp; Currently, its not recommended to depend on any particular behavior in this case, si no mas bien depender de una meta vista para evitar el zoom.</p>
<dl>
</dl>
<h2 id="Browser_compatibility">Browser compatibility</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</th>
      </tr>
      <tr>
        <td>Basic support</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>Chrome for Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatGeckoMobile("6.0") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="Gecko_notes">Gecko notes</h3>
<p>The <code>dom.w3c_touch_events.enabled</code> preference can be used to enable and disable support for standard touch events; by default, they're enabled.</p>
<div class="geckoVersionNote" style="undefined">
  <p>{{ gecko_callout_heading("12.0") }}</p>
  <p>Prior to Gecko 12.0 {{ geckoRelease("12.0") }}, Gecko did not support multi-touch; only one touch at a time was reported.</p>
</div>
<div class="note">
  <strong>Note: </strong>Prior to Gecko 6.0 {{ geckoRelease("6.0") }}, Gecko offered a <a href="/en/DOM/Touch_events_(Mozilla_experimental)" title="en/DOM/Touch events (Mozilla experimental)">proprietary touch event API</a>. That API is now deprecated; you should switch to this one."</div>
Revertir a esta revisión