Sto lavorando su un sito Web mobile che deve funzionare su una varietà di dispositivi. Quello che mi sta facendo venire il mal di testa al momento è BlackBerry.

Dobbiamo supportare sia i clic della tastiera sia gli eventi touch.

Idealmente userei solo:

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

ma il problema che stiamo riscontrando è che alcuni di questi dispositivi Blackberry hanno un ritardo molto fastidioso dal momento del tocco ad innescare un clic.

Il rimedio è invece usare il touchstart:

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

Ma come faccio a legare entrambi gli eventi, ma solo sparandone uno? Ho ancora bisogno dell'evento click per i dispositivi a tastiera, ma ovviamente non voglio che l'evento click venga attivato se sto usando un dispositivo touch.

Una domanda bonus: esiste comunque un modo per farlo e ospitare anche i browser che non hanno nemmeno un evento touchstart? Nella ricerca di questo, sembra che BlackBerry OS5 non supporti il ​​touchstart, quindi dovrà anche fare affidamento sugli eventi di clic per quel browser.

APPENDICE:

Forse una domanda più completa è:

Con jQuery, è possibile / consigliato gestire entrambe le interazioni tattili e le interazioni del mouse con gli stessi binding?

Idealmente, la risposta è sì. In caso contrario, ho alcune opzioni:

1) Utilizziamo WURFL per ottenere informazioni sul dispositivo in modo da poter creare la nostra matrice di dispositivi. A seconda del dispositivo, utilizzeremo il touchstart O il clic.

2) Rileva il supporto touch nel browser tramite JS (ho bisogno di fare qualche ricerca in più su questo, ma sembra che sia fattibile).

Tuttavia, ciò lascia ancora un problema: che dire dei dispositivi che supportano ENTRAMBI. Alcuni dei telefoni supportati (ovvero Nokias e Blackberry) sono dotati sia di touchscreen che di tastiere. Quindi quel tipo di mi riporta al punto di partenza alla domanda originale ... c'è un modo per consentire entrambi contemporaneamente in qualche modo?

Aggiornamento : controlla il progetto Polyfill di eventi puntatore jQuery che ti consente di associare eventi "puntatore" invece di scegliere tra mouse e tocco.

Associa entrambi, ma crea una bandiera in modo che la funzione si attivi solo una volta ogni 100 ms circa.

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

  return false
});

Questa è la correzione che "creo" ed elimina GhostClick e implementa FastClick. Prova da solo e facci sapere se ha funzionato per te.

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

        // Do your magic here

});

Potresti provare qualcosa del genere:

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

Di solito funziona anche questo:

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

});

Basta aggiungere return false;alla fine della on("click touchstart")funzione evento per risolvere questo problema.

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

Dalla documentazione di jQuery su .on ()

Il ritorno falseda un gestore di eventi chiamerà automaticamente event.stopPropagation()e event.preventDefault(). Un falsevalore può anche essere passato per il gestore come scorciatoia per function(){ return false; }.

Ho dovuto fare qualcosa di simile. Ecco una versione semplificata di ciò che ha funzionato per me. Se viene rilevato un evento tocco, rimuovere l'associazione clic.

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

  //your code here
});

Nel mio caso l'evento click è stato associato a un <a>elemento, quindi ho dovuto rimuovere l'associazione click e ricollegare un evento click che ha impedito l'azione predefinita per l' <a>elemento.

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

  //your code here
});

Ci sono riuscito nel modo seguente.

Vai tranquillo...

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

Credo che la migliore pratica sia ora di usare:

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

touchend

L'evento touchend viene generato quando un touch point viene rimosso dalla superficie touch.

L'evento touchend non attiverà alcun evento del mouse.

---

MouseUp

L'evento mouseup viene inviato a un elemento quando il puntatore del mouse si trova sopra l'elemento e il pulsante del mouse viene rilasciato. Qualsiasi elemento HTML può ricevere questo evento.

L'evento del mouseup non attiverà alcun evento touch.

ESEMPIO

$('#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>

EDIT (2017)

A partire dal 2017, i browser iniziano con Chrome e fanno passi verso la realizzazione dell'evento clic .on("click") più compatibile sia per il mouse che per il tocco, eliminando il ritardo generato dagli eventi di tocco sulle richieste di clic.

Questo porta alla conclusione che tornare all'utilizzo del solo evento click sarebbe la soluzione più semplice per andare avanti.

Non ho ancora fatto alcun test tra browser per vedere se questo è pratico.

Generalmente non si desidera mescolare l'API touch e non touch (clic) predefinito. Una volta entrati nel mondo del tocco, è più facile occuparsi solo delle funzioni relative al tocco. Di seguito è riportato uno pseudo codice che farebbe quello che vuoi.

Se ti connetti nell'evento touchmove e segui le posizioni, puoi aggiungere altri elementi nella funzione doTouchLogic per rilevare gesti e quant'altro.

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
     }
}

controlla i pulsanti rapidi e chost clic da google https://developers.google.com/mobile/articles/fast_buttons

Bene ... Tutti questi sono super complicati.

Se hai modernizr, è un gioco da ragazzi.

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

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

Un'altra implementazione per una migliore manutenzione. Tuttavia, questa tecnica eseguirà anche event.stopPropagation (). Il clic non viene catturato su nessun altro elemento che ha fatto clic per 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 a scopo di documentazione, ecco cosa ho fatto per il clic più rapido / reattivo sul desktop / toccare su una soluzione mobile a cui potrei pensare:

Ho sostituito la onfunzione di jQuery con una modificata che, ogni volta che il browser supporta eventi touch, ha sostituito tutti i miei eventi click con touchstart.

$.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);
        };
    }()),
});

L'uso di quanto sarebbe lo stesso di prima, come:

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

Userebbe il touchstart quando disponibile, fare clic quando no. Non sono necessari ritardi di alcun tipo: D

Ho appena ontouchstartavuto l'idea di memorizzare se fosse mai stato attivato. In questo caso ci troviamo su un dispositivo che lo supporta e vogliamo ignorare l' onclickevento. Dal momento che ontouchstartdovrebbe essere sempre attivato prima onclick , sto usando questo:

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

Potresti provare così:

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

Nel mio caso questo ha funzionato perfettamente:

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

Il problema principale era quando invece il mouse ho provato con il clic, sui dispositivi touch ha attivato contemporaneamente il clic e il touchend, se uso il clic disattivato, alcune funzionalità non hanno funzionato affatto sui dispositivi mobili. Il problema con il clic è che è un evento globale che attiva il resto dell'evento incluso il touchend.

Questo ha funzionato per me, il cellulare ascolta entrambi, quindi evita quello, che è l'evento touch. il desktop ascolta solo il mouse.

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

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

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

Essendo per me la migliore risposta a quella data da Mottie, sto solo cercando di rendere il suo codice più riutilizzabile, quindi questo è il mio contributo:

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;
});

Sto anche lavorando su un'app Web per Android / iPad e sembra che usare solo "touchmove" sia sufficiente per "spostare i componenti" (non è necessario il touchstart). Disabilitando il touchstart, puoi usare .click (); da jQuery. In realtà funziona perché non è stato sovraccaricato dal touchstart.

Infine, puoi binb .live ("touchstart", function (e) {e.stopPropagation ();}); per chiedere all'evento touchstart di interrompere la propagazione, soggiorno fare clic su () per attivarsi.

Ha funzionato per me.

Ci sono molte cose da considerare quando si cerca di risolvere questo problema. La maggior parte delle soluzioni interrompe lo scorrimento o non gestisce correttamente gli eventi di clic fantasma.

Per una soluzione completa vedi https://developers.google.com/mobile/articles/fast_buttons

NB: Non è possibile gestire eventi di clic fantasma in base agli elementi. Un clic ritardato viene generato dalla posizione dello schermo, quindi se i tuoi eventi touch modificano la pagina in qualche modo, l'evento click verrà inviato alla nuova versione della pagina.

Può essere efficace assegnare agli eventi 'touchstart mousedown'o 'touchend mouseup'evitare effetti collaterali indesiderati derivanti dall'uso click.

Approfittando del fatto che un clic seguirà sempre un evento touch, ecco cosa ho fatto per sbarazzarmi del "clic fantasma" senza dover utilizzare timeout o flag globali.

$('#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
});

Fondamentalmente ogni volta che un ontouchstartevento si attiva sull'elemento, contrassegna un set e successivamente viene rimosso (e ignorato), quando arriva il clic.

Perché non utilizzare l'API degli eventi jQuery?

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

Ho usato questo semplice evento con successo. È pulito, identificabile e abbastanza flessibile da migliorare.

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
};

Se stai usando jQuery, per me ha funzionato abbastanza bene:

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));

Anche altre soluzioni sono buone ma stavo legando più eventi in un ciclo e avevo bisogno della funzione di auto-chiamata per creare una chiusura appropriata. Inoltre, non volevo disabilitare l'associazione poiché volevo che fosse richiamabile al prossimo clic / touchstart.

Potrebbe aiutare qualcuno in una situazione simile!

Per funzionalità semplici, basta riconoscere il tocco o fare clic Uso il seguente codice:

var element = $("#element");

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

Questo restituirà "touch" se l'evento touchstart è definito e "no touch" in caso contrario. Come ho detto, questo è un approccio semplice per gli eventi click / tap proprio questo.

Sto provando questo e finora funziona (ma sono solo su Android / Phonegap quindi avvertimento)

  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...
  }

Non mi piace il fatto che sto rilegando i gestori ad ogni tocco, ma tutte le cose considerate i tocchi non accadono molto spesso (in tempo di computer!)

Ho un sacco di gestori come quello per '#keypad', quindi avere una semplice funzione che mi permette di affrontare il problema senza troppo codice è il motivo per cui sono andato in questo modo.

Prova a usare Virtual Mouse (vmouse) Bindingsda jQuery Mobile. È un evento virtuale specifico per il tuo caso:

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

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

Elenco di supporto del browser: http://jquerymobile.com/browser-support/1.4/

EDIT: La mia precedente risposta (basata sulle risposte in questo thread) non era la strada giusta per me. Volevo che un sottomenu si espandesse al passaggio del mouse o toccasse il clic e collassasse alla fine del mouse o un altro tocco del tocco. Dato che normalmente gli eventi del mouse vengono generati dopo gli eventi touch, è stato difficile scrivere listener di eventi che supportano sia l'input touchscreen che mouse contemporaneamente.

Plugin jQuery: tocca o mouse

Ho finito per scrivere un plug-in jQuery chiamato " Touch Or Mouse " (minimizzato 897 byte) in grado di rilevare se un evento è stato invocato da un touchscreen o da un mouse (senza testare il supporto touch!). Ciò consente il supporto sia del touchscreen che del mouse contemporaneamente e separa completamente i loro eventi.

In questo modo l'OP può utilizzare touchstarto touchendper rispondere rapidamente ai clic di tocco e clickai clic richiamati solo da un mouse.

Dimostrazione

Il primo deve fare cioè. l'elemento body tiene traccia degli eventi touch:

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

Gli eventi del mouse sono legati agli elementi nel modo predefinito e chiamando telefonicamente $body.touchOrMouse('get', e)possiamo scoprire se l'evento è stato invocato da un touchscreen o da 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.
  }
}

Guarda il plugin al lavoro su http://jsfiddle.net/lmeurs/uo4069nh .

Spiegazione

1. Questo plugin deve essere chiamato ie. l'elemento body da tracciare touchstarte gli touchendeventi, in questo modo l' touchendevento non deve essere attivato sull'elemento trigger (es. un link o un pulsante). Tra questi due eventi touch questo plug-in considera qualsiasi evento del mouse da invocare al tocco.
2. Gli eventi del mouse vengono attivati ​​solo dopo touchend, quando viene ghostEventDelaygenerato un evento del mouse all'interno dell'opzione (opzione, 1000 ms per impostazione predefinita) touchend, questo plug-in considera l'evento del mouse invocato al tocco.
3. Quando si fa clic su un elemento utilizzando un touchscreen, l'elemento ottiene lo :activestato. L' mouseleaveevento viene generato solo dopo che l'elemento perde questo stato di ie. facendo clic su un altro elemento. Dato che potrebbero essere secondi (o minuti!) Dopo che l' mouseenterevento è stato generato, questo plugin tiene traccia dell'ultimo mouseenterevento di un elemento : se l'ultimo mouseenterevento è stato invocato al tocco, anche il seguente mouseleaveevento viene considerato invocato al tocco.

Ecco un modo semplice per farlo:

// 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
  }
});

Fondamentalmente si salva il primo tipo di evento che viene attivato nella proprietà 'trigger' nell'oggetto dati di jQuery che è collegato al documento principale ed eseguito solo quando il tipo di evento è uguale al valore in 'trigger'. Sui dispositivi touch, la catena di eventi sarebbe probabilmente "touchstart" seguita da "click"; tuttavia, il gestore "click" non verrà eseguito perché "click" non corrisponde al tipo di evento iniziale salvato in "trigger" ("touchstart").

Il presupposto, e credo che sia sicuro, è che il tuo smartphone non cambierà spontaneamente da un dispositivo touch a un dispositivo mouse, altrimenti il ​​tap non si registrerà mai perché il tipo di evento "trigger" viene salvato solo una volta per caricamento della pagina e "clic" non corrisponderebbero mai a "touchstart".

Ecco un codice con cui puoi giocare (prova a toccare il pulsante su un dispositivo touch - non ci dovrebbe essere alcun ritardo di clic): http://codepen.io/thdoan/pen/xVVrOZ

Ho anche implementato questo come un semplice plug-in jQuery che supporta anche il filtro dei discendenti di jQuery passando una stringa di selezione:

// 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/

Il metodo migliore che ho trovato è quello di scrivere l'evento touch e fare in modo che l'evento chiami il normale evento click programmaticamente. In questo modo hai tutti i tuoi normali eventi click e quindi devi aggiungere un solo gestore eventi per tutti gli eventi touch. Per ogni nodo che vuoi rendere tangibile, aggiungi semplicemente la classe "toccabile" per invocare il gestore di tocco. Con Jquery funziona così con qualche logica per assicurarsi che sia un vero evento touch e non 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
});