Estoy trabajando en un sitio web móvil que tiene que funcionar en una variedad de dispositivos. El que me está dando dolor de cabeza en este momento es BlackBerry.

Necesitamos admitir tanto los clics del teclado como los eventos táctiles.

Idealmente, solo usaría:

$thing.click(function(){...})

pero el problema con el que nos encontramos es que algunos de estos dispositivos blackberry tienen un retraso muy molesto desde el momento en que se toca hasta que se activa un clic.

El remedio es usar touchstart en su lugar:

$thing.bind('touchstart', function(event){...})

Pero, ¿cómo hago para vincular ambos eventos, pero solo para disparar uno? Todavía necesito el evento de clic para dispositivos de teclado, pero, por supuesto, no quiero que se active el evento de clic si estoy usando un dispositivo táctil.

Una pregunta adicional: ¿hay alguna forma de hacer esto y, además, acomodar navegadores que ni siquiera tienen un evento de inicio táctil? Al investigar esto, parece que BlackBerry OS5 no es compatible con el inicio táctil, por lo que también tendrá que depender de los eventos de clic para ese navegador.

APÉNDICE:

Quizás una pregunta más completa es:

Con jQuery, ¿es posible / recomendado manejar las interacciones táctiles y las interacciones del mouse con los mismos enlaces?

Idealmente, la respuesta es sí. Si no, tengo algunas opciones:

1) Usamos WURFL para obtener información del dispositivo para poder crear nuestra propia matriz de dispositivos. Dependiendo del dispositivo, usaremos touchstart O haremos clic.

2) Detectar soporte táctil en el navegador a través de JS (necesito investigar un poco más sobre eso, pero parece que es factible).

Sin embargo, eso todavía deja un problema: ¿qué pasa con los dispositivos que admiten AMBOS? Algunos de los teléfonos que admitimos (a saber, Nokias y BlackBerries) tienen pantallas táctiles y teclados. Entonces, eso me lleva de vuelta a la pregunta original ... ¿hay alguna manera de permitir ambas cosas a la vez de alguna manera?

Actualización : Echa un vistazo al proyecto PolyQill de jQuery Pointer Events que te permite enlazar eventos de "puntero" en lugar de elegir entre el mouse y el toque.

Enlace a ambos, pero haga una bandera para que la función solo se active una vez cada 100 ms o menos.

var flag = false;
$thing.bind('touchstart click', function(){
  if (!flag) {
    flag = true;
    setTimeout(function(){ flag = false; }, 100);
    // do something
  }

  return false
});

Esta es la solución que "creo" y saca GhostClick e implementa FastClick. Pruebe por su cuenta y háganos saber si funcionó para usted.

$(document).on('touchstart click', '.myBtn', function(event){
        if(event.handled === false) return
        event.stopPropagation();
        event.preventDefault();
        event.handled = true;

        // Do your magic here

});

Podrías probar algo como esto:

var clickEventType=((document.ontouchstart!==null)?'click':'touchstart');
$("#mylink").bind(clickEventType, myClickHandler);

Por lo general, esto también funciona:

$('#buttonId').on('touchstart click', function(e){
    e.stopPropagation(); e.preventDefault();
    //your code here

});

Solo agregar return false;al final de la on("click touchstart")función de evento puede resolver este problema.

$(this).on("click touchstart", function() {
  // Do things
  return false;
});

De la documentación de jQuery en .on ()

Al regresar falsede un controlador de eventos, automáticamente llamará event.stopPropagation()y event.preventDefault(). falseTambién se puede pasar un valor para el controlador como una forma abreviada de function(){ return false; }.

Tenía que hacer algo similar. Aquí hay una versión simplificada de lo que funcionó para mí. Si se detecta un evento táctil, elimine el enlace de clic.

$thing.on('touchstart click', function(event){
  if (event.type == "touchstart")
    $(this).off('click');

  //your code here
});

En mi caso, el evento de clic estaba vinculado a un <a>elemento, así que tuve que eliminar el enlace de clic y volver a vincular un evento de clic que impedía la acción predeterminada para el <a>elemento.

$thing.on('touchstart click', function(event){
  if (event.type == "touchstart")
    $(this).off('click').on('click', function(e){ e.preventDefault(); });

  //your code here
});

Tuve éxito de la siguiente manera.

Pan comido...

$(this).on('touchstart click', function(e){
  e.preventDefault();
  //do your stuff here
});

Creo que la mejor práctica es usar ahora:

$('#object').on('touchend mouseup', function () { });

touchend

El evento de toque se desencadena cuando se elimina un punto de contacto de la superficie táctil.

El evento touchend no activará ningún evento del mouse.

---

mouseup

El evento de mouseup se envía a un elemento cuando el puntero del mouse se encuentra sobre el elemento y se suelta el botón del mouse. Cualquier elemento HTML puede recibir este evento.

El evento de mouseup no activará ningún evento táctil.

EJEMPLO

$('#click').on('mouseup', function () { alert('Event detected'); });
$('#touch').on('touchend', function () { alert('Event detected'); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="click">Click me</h1>
<h1 id="touch">Touch me</h1>

EDITAR (2017)

A partir de 2017, los navegadores que comienzan con Chrome y dan pasos para hacer que el evento de clic sea .on("click")más compatible tanto para el mouse como para el tacto, eliminando el retraso generado por los eventos de toque en las solicitudes de clic.

Esto lleva a la conclusión de que volver a usar solo el evento de clic sería la solución más simple para avanzar.

Todavía no he hecho ninguna prueba de navegador cruzado para ver si esto es práctico.

Por lo general, no desea mezclar la API predeterminada táctil y no táctil (clic). Una vez que ingresa al mundo táctil, es más fácil tratar solo con las funciones táctiles. A continuación hay un pseudocódigo que haría lo que usted quisiera.

Si se conecta en el evento touchmove y rastrea las ubicaciones, puede agregar más elementos en la función doTouchLogic para detectar gestos y otras cosas.

var touchStartTime;
var touchStartLocation;
var touchEndTime;
var touchEndLocation;

$thing.bind('touchstart'), function() {
     var d = new Date();
     touchStartTime = d.getTime();
     touchStartLocation = mouse.location(x,y);
});

$thing.bind('touchend'), function() {
     var d = new Date();
     touchEndTime= d.getTime();
     touchEndLocation= mouse.location(x,y);
     doTouchLogic();
});

function doTouchLogic() {
     var distance = touchEndLocation - touchStartLocation;
     var duration = touchEndTime - touchStartTime;

     if (duration <= 100ms && distance <= 10px) {
          // Person tapped their finger (do click/tap stuff here)
     }
     if (duration > 100ms && distance <= 10px) {
          // Person pressed their finger (not a quick tap)
     }
     if (duration <= 100ms && distance > 10px) {
          // Person flicked their finger
     }
     if (duration > 100ms && distance > 10px) {
          // Person dragged their finger
     }
}

verifique los botones rápidos y los clics de chost desde google https://developers.google.com/mobile/articles/fast_buttons

Bueno ... Todos estos son súper complicados.

Si tienes modernizador, es obvio.

ev = Modernizr.touch ? 'touchstart' : 'click';

$('#menu').on(ev, '[href="#open-menu"]', function(){
  //winning
});

Otra implementación para un mejor mantenimiento. Sin embargo, esta técnica también hará event.stopPropagation (). El clic no se detecta en ningún otro elemento que hizo clic durante 100 ms.

var clickObject = {
    flag: false,
    isAlreadyClicked: function () {
        var wasClicked = clickObject.flag;
        clickObject.flag = true;
        setTimeout(function () { clickObject.flag = false; }, 100);
        return wasClicked;
    }
};

$("#myButton").bind("click touchstart", function (event) {
   if (!clickObject.isAlreadyClicked()) {
      ...
   }
}

Solo para fines de documentación, esto es lo que he hecho para el clic más rápido / más rápido en el escritorio / toque en la solución móvil que se me ocurre:

Reemplacé la onfunción de jQuery por una modificada que, cada vez que el navegador admite eventos táctiles, reemplaza todos mis eventos de clic con inicio táctil.

$.fn.extend({ _on: (function(){ return $.fn.on; })() });
$.fn.extend({
    on: (function(){
        var isTouchSupported = 'ontouchstart' in window || window.DocumentTouch && document instanceof DocumentTouch;
        return function( types, selector, data, fn, one ) {
            if (typeof types == 'string' && isTouchSupported && !(types.match(/touch/gi))) types = types.replace(/click/gi, 'touchstart');
            return this._on( types, selector, data, fn);
        };
    }()),
});

Uso que sería exactamente el mismo que antes, como:

$('#my-button').on('click', function(){ /* ... */ });

Pero usaría touchstart cuando esté disponible, haga clic cuando no lo esté. No se necesitan retrasos de ningún tipo: D

Se me ocurrió la idea de memorizar si ontouchstartalguna vez se activó. En este caso, estamos en un dispositivo que lo admite y queremos ignorar el onclickevento. Como ontouchstartsiempre debe activarse antes onclick , estoy usando esto:

<script> touchAvailable = false; </script>
<button ontouchstart="touchAvailable=true; myFunction();" onclick="if(!touchAvailable) myFunction();">Button</button>

Podrías intentarlo así:

var clickEvent = (('ontouchstart' in document.documentElement)?'touchstart':'click');
$("#mylink").on(clickEvent, myClickHandler);

En mi caso esto funcionó perfectamente:

jQuery(document).on('mouseup keydown touchend', function (event) {
var eventType = event.type;
if (eventType == 'touchend') {
    jQuery(this).off('mouseup');
}
});

El principal problema fue cuando en lugar de mouseup probé con clic, en dispositivos táctiles activé clic y toque al mismo tiempo, si uso el clic apagado, alguna funcionalidad no funcionó en absoluto en dispositivos móviles. El problema con el clic es que es un evento global que dispara el resto del evento, incluido el touchend.

Esto funcionó para mí, el móvil escucha a ambos, así que evita el uno, que es el evento táctil. El escritorio solo escucha el mouse.

 $btnUp.bind('touchstart mousedown',function(e){
     e.preventDefault();

     if (e.type === 'touchstart') {
         return;
     }

     var val = _step( _options.arrowStep );
               _evt('Button', [val, true]);
  });

Siendo para mí la mejor respuesta de Mottie, solo estoy tratando de hacer su código más reutilizable, así que esta es mi contribución:

bindBtn ("#loginbutton",loginAction);

function bindBtn(element,action){

var flag = false;
$(element).bind('touchstart click', function(e) {
    e.preventDefault();
    if (!flag) {
        flag = true;
        setTimeout(function() {
            flag = false;
        }, 100);
        // do something
        action();
    }
    return false;
});

También estoy trabajando en una aplicación web para Android / iPad, y parece que si solo usa "touchmove" es suficiente para "mover componentes" (no es necesario el inicio táctil). Al deshabilitar el inicio táctil, puede usar .click (); de jQuery. En realidad está funcionando porque no ha sido sobrecargado por touchstart

Finalmente, puede binb .live ("touchstart", función (e) {e.stopPropagation ();}); para pedirle al evento de inicio táctil que deje de propagarse, haga clic en la sala de estar () para activarse.

Funcionó para mi.

Hay muchas cosas a tener en cuenta al intentar resolver este problema. La mayoría de las soluciones rompen el desplazamiento o no manejan correctamente los eventos de clic fantasma.

Para obtener una solución completa, consulte https://developers.google.com/mobile/articles/fast_buttons

NB: No puede manejar eventos de clic fantasma por elemento. La ubicación de la pantalla activa un clic retrasado, por lo que si sus eventos táctiles modifican la página de alguna manera, el evento de clic se enviará a la nueva versión de la página.

Puede ser efectivo asignar a los eventos 'touchstart mousedown'o 'touchend mouseup'evitar efectos secundarios no deseados del uso click.

Aprovechando el hecho de que un clic siempre seguirá a un evento táctil, esto es lo que hice para deshacerme del "clic fantasma" sin tener que usar tiempos de espera o banderas globales.

$('#buttonId').on('touchstart click', function(event){
    if ($(this).data("already")) {
        $(this).data("already", false);
        return false;
    } else if (event.type == "touchstart") {
        $(this).data("already", true);
    }
    //your code here
});

Básicamente, cada vez ontouchstartque se dispara un evento en el elemento, se marca un conjunto y luego se elimina (e ignora), cuando llega el clic.

¿Por qué no usar la API de eventos jQuery?

http://learn.jquery.com/events/event-extensions/

He usado este simple evento con éxito. Es limpio, espacio de nombres y lo suficientemente flexible como para mejorar.

var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
var eventType = isMobile ? "touchstart" : "click";

jQuery.event.special.touchclick = {
  bindType: eventType,
  delegateType: eventType
};

Si está utilizando jQuery, lo siguiente funcionó bastante bien para mí:

var callback; // Initialize this to the function which needs to be called

$(target).on("click touchstart", selector, (function (func){
    var timer = 0;
    return function(e){
        if ($.now() - timer < 500) return false;
        timer = $.now();
        func(e);
    }
})(callback));

Otras soluciones también son buenas, pero estaba vinculando múltiples eventos en un bucle y necesitaba la función de auto llamada para crear un cierre apropiado. Además, no quería deshabilitar el enlace ya que quería que se pueda invocar en el siguiente clic / inicio táctil.

¡Podría ayudar a alguien en una situación similar!

Para funciones simples, simplemente reconozca tocar o hacer clic. Uso el siguiente código:

var element = $("#element");

element.click(function(e)
{
  if(e.target.ontouchstart !== undefined)
  {
    console.log( "touch" );
    return;
  }
  console.log( "no touch" );
});

Esto devolverá "touch" si el evento touchstart está definido y "no touch" si no. Como dije, este es un enfoque simple para eventos de clic / toque.

Estoy intentando esto y hasta ahora funciona (pero solo estoy en Android / Phonegap, por lo tanto, advertencia)

  function filterEvent( ob, ev ) {
      if (ev.type == "touchstart") {
          ob.off('click').on('click', function(e){ e.preventDefault(); });
      }
  }
  $('#keypad').on('touchstart click', '.number, .dot', function(event) {
      filterEvent( $('#keypad'), event );
      console.log( event.type );  // debugging only
           ... finish handling touch events...
  }

No me gusta el hecho de que estoy volviendo a vincular los controladores en cada toque, pero todas las cosas consideradas toques no ocurren muy a menudo (¡en tiempo de computadora!)

Tengo una TONELADA de controladores como el del '# teclado', por lo que tener una función simple que me permite lidiar con el problema sin demasiado código es la razón por la que elegí este camino.

Intenta usar Virtual Mouse (vmouse) Bindingsdesde jQuery Mobile. Es un evento virtual especialmente para su caso:

$thing.on('vclick', function(event){ ... });

http://api.jquerymobile.com/vclick/

Lista de soporte del navegador: http://jquerymobile.com/browser-support/1.4/

EDITAR: Mi respuesta anterior (basada en las respuestas en este hilo) no era el camino a seguir para mí. Quería que un submenú se expandiera al entrar con el mouse o al hacer clic con el botón táctil y al contraerse con el botón izquierdo del mouse u otro clic táctil. Dado que los eventos del mouse normalmente se activan después de los eventos táctiles, fue un poco complicado escribir oyentes de eventos que admitan la entrada de la pantalla táctil y del mouse al mismo tiempo.

Complemento jQuery: toque o mouse

Terminé escribiendo un complemento jQuery llamado " Touch or Mouse " (897 bytes minified) que puede detectar si un evento fue invocado por una pantalla táctil o un mouse (¡sin probar el soporte táctil!). Esto permite la compatibilidad con la pantalla táctil y el mouse al mismo tiempo. y separa completamente sus eventos.

De esta forma, el OP puede usar touchstarto touchendpara responder rápidamente a los clics táctiles y clickpara los clics invocados solo con un mouse.

Demostración

Primero hay que hacer ie. el elemento del cuerpo sigue los eventos táctiles:

$(document.body).touchOrMouse('init');

Los eventos del mouse están vinculados a los elementos de la forma predeterminada y al llamar $body.touchOrMouse('get', e)podemos averiguar si el evento fue invocado por una pantalla táctil o un mouse.

$('.link').click(function(e) {
  var touchOrMouse = $(document.body).touchOrMouse('get', e);

  if (touchOrMouse === 'touch') {
    // Handle touch click.
  }
  else if (touchOrMouse === 'mouse') {
    // Handle mouse click.
  }
}

Vea el complemento en funcionamiento en http://jsfiddle.net/lmeurs/uo4069nh .

Explicación

1. Este complemento necesita ser llamado, es decir. el elemento del cuerpo para rastrear touchstarty touchendeventos, de esta manera el touchendevento no tiene que ser disparado en el elemento desencadenante (es decir, un enlace o botón). Entre estos dos eventos táctiles, este complemento considera que cualquier evento del mouse se invoca mediante el tacto.
2. Los eventos del mouse se activan solo después touchend, cuando se dispara un evento del mouse dentro de ghostEventDelay(opción, 1000ms por defecto) después touchend, este complemento considera que el evento del mouse se invoca mediante el tacto.
3. Al hacer clic en un elemento usando una pantalla táctil, el elemento gana el :activeestado. El mouseleaveevento solo se dispara después de que el elemento pierde este estado por ej. haciendo clic en otro elemento. Como esto podría ser segundos (¡o minutos!) Después de mouseenterque se haya disparado el evento, este complemento realiza un seguimiento del último mouseenterevento de un elemento : si el último mouseenterevento fue invocado por contacto, el siguiente mouseleaveevento también se considera invocado por contacto.

Aquí hay una manera simple de hacerlo:

// A very simple fast click implementation
$thing.on('click touchstart', function(e) {
  if (!$(document).data('trigger')) $(document).data('trigger', e.type);
  if (e.type===$(document).data('trigger')) {
    // Do your stuff here
  }
});

Básicamente, guarda el primer tipo de evento que se activa en la propiedad 'trigger' en el objeto de datos de jQuery que está adjunto al documento raíz, y solo se ejecuta cuando el tipo de evento es igual al valor en 'trigger'. En dispositivos táctiles, la cadena de eventos probablemente sería 'touchstart' seguido de 'click'; sin embargo, el controlador 'clic' no se ejecutará porque "clic" no coincide con el tipo de evento inicial guardado en "disparador" ("inicio táctil").

La suposición, y creo que es segura, es que su teléfono inteligente no cambiará espontáneamente de un dispositivo táctil a un dispositivo de mouse o de lo contrario el toque nunca se registrará porque el tipo de evento 'disparador' solo se guarda una vez por la carga de la página y el "clic" nunca coincidirían con el "inicio táctil".

Aquí hay un codepen con el que puede jugar (intente tocar el botón en un dispositivo táctil; no debería haber retraso de clic): http://codepen.io/thdoan/pen/xVVrOZ

También implementé esto como un simple complemento jQuery que también admite el filtrado de descendientes de jQuery al pasar una cadena de selección:

// A very simple fast click plugin
// Syntax: .fastClick([selector,] handler)
$.fn.fastClick = function(arg1, arg2) {
  var selector, handler;
  switch (typeof arg1) {
    case 'function':
      selector = null;
      handler = arg1;
      break;
    case 'string':
      selector = arg1;
      if (typeof arg2==='function') handler = arg2;
      else return;
      break;
    default:
      return;
  }
  this.on('click touchstart', selector, function(e) {
    if (!$(document).data('trigger')) $(document).data('trigger', e.type);
    if (e.type===$(document).data('trigger')) handler.apply(this, arguments);
  });
};

Codepen: http://codepen.io/thdoan/pen/GZrBdo/

El mejor método que he encontrado es escribir el evento táctil y hacer que ese evento llame al evento de clic normal mediante programación. De esta manera, tiene todos sus eventos de clic normales y luego necesita agregar un solo controlador de eventos para todos los eventos táctiles. Para cada nodo que desee que sea táctil, simplemente agregue la clase "táctil" para invocar el controlador táctil. Con Jquery funciona así con cierta lógica para asegurarse de que sea un evento táctil real y no un falso positivo.

$("body").on("touchstart", ".touchable", function() { //make touchable  items fire like a click event
var d1 = new Date();
var n1 = d1.getTime();
setTimeout(function() {
    $(".touchable").on("touchend", function(event) {
        var d2 = new Date();
        var n2 = d2.getTime();
        if (n2 - n1 <= 300) {
            $(event.target).trigger("click"); //dont do the action here just call real click handler
        }
    });
}, 50)}).on("click", "#myelement", function() {
//all the behavior i originally wanted
});