Je travaille sur un site Web mobile qui doit fonctionner sur une variété d'appareils. Celui qui me fait mal à la tête en ce moment est BlackBerry.

Nous devons prendre en charge les clics sur le clavier ainsi que les événements tactiles.

Idéalement, j'utiliserais simplement:

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

mais le problème que nous rencontrons est que certains de ces appareils BlackBerry ont un délai très gênant entre le moment où le toucher et le déclenchement d'un clic.

Le remède consiste à utiliser plutôt le démarrage tactile:

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

Mais comment puis-je lier les deux événements, mais n'en déclencher qu'un? J'ai toujours besoin de l'événement click pour les périphériques clavier, mais bien sûr, je ne veux pas que l'événement click se déclenche si j'utilise un périphérique tactile.

Une question bonus: existe-t-il de toute façon de le faire et d'accueillir en outre des navigateurs qui n'ont même pas d'événement tactile? En recherchant cela, il semble que BlackBerry OS5 ne prend pas en charge le démarrage tactile, il devra donc également s'appuyer sur les événements de clic pour ce navigateur.

ADDENDA:

Peut-être une question plus globale est:

Avec jQuery, est-il possible / recommandé de gérer à la fois les interactions tactiles et les interactions avec la souris avec les mêmes liaisons?

Idéalement, la réponse est oui. Sinon, j'ai quelques options:

1) Nous utilisons WURFL pour obtenir des informations sur les appareils afin de créer notre propre matrice d'appareils. Selon l'appareil, nous utiliserons le démarrage tactile OU cliquez sur.

2) Détecter la prise en charge tactile dans le navigateur via JS (j'ai besoin de faire plus de recherches à ce sujet, mais il semble que cela soit faisable).

Cependant, cela laisse toujours un problème: qu'en est-il des appareils qui prennent en charge les deux. Certains des téléphones que nous prenons en charge (à savoir les Nokias et les Blackberry) ont à la fois des écrans tactiles et des claviers. Donc, ce genre de chose me ramène à la question d'origine ... existe-t-il un moyen de permettre les deux à la fois d'une manière ou d'une autre?

Mise à jour : Découvrez le projet jQuery Pointer Events Polyfill qui vous permet de vous lier à des événements "pointeur" au lieu de choisir entre la souris et le toucher.

Liez aux deux, mais créez un indicateur pour que la fonction ne se déclenche qu'une fois toutes les 100 ms environ.

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

  return false
});

C'est le correctif que je "crée" et il supprime le GhostClick et implémente le FastClick. Essayez par vous-même et faites-nous savoir si cela a fonctionné pour vous.

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

        // Do your magic here

});

Vous pouvez essayer quelque chose comme ceci:

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

Habituellement, cela fonctionne aussi:

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

});

Un simple ajout return false;à la fin de la on("click touchstart")fonction d'événement peut résoudre ce problème.

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

De la documentation jQuery sur .on ()

Le retour falsed'un gestionnaire d'événements appellera automatiquement event.stopPropagation()et event.preventDefault(). Une falsevaleur peut également être transmise pour le gestionnaire en tant que raccourci pour function(){ return false; }.

J'ai dû faire quelque chose de similaire. Voici une version simplifiée de ce qui a fonctionné pour moi. Si un événement tactile est détecté, supprimez la liaison de clic.

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

  //your code here
});

Dans mon cas, l'événement click était lié à un <a>élément, j'ai donc dû supprimer la liaison click et relier un événement click qui a empêché l'action par défaut de l' <a>élément.

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

  //your code here
});

J'ai réussi par la voie suivante.

Peasy facile...

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

Je crois que la meilleure pratique consiste maintenant à utiliser:

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

toucher

L'événement tactile est déclenché lorsqu'un point tactile est retiré de la surface tactile.

L'événement touchend ne déclenchera aucun événement de souris.

---

souris

L'événement mouseup est envoyé à un élément lorsque le pointeur de la souris se trouve sur l'élément et que le bouton de la souris est relâché. Tout élément HTML peut recevoir cet événement.

L'événement mouseup ne déclenchera aucun événement tactile.

EXEMPLE

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

Depuis 2017, les navigateurs commençant par Chrome et effectuant des étapes vers la création de l'événement de clic .on("click") plus compatible pour la souris et le toucher en éliminant le retard généré par les événements tap sur les demandes de clic.

Cela conduit à la conclusion que le retour à l'utilisation de l'événement click serait la solution la plus simple pour aller de l'avant.

Je n'ai pas encore fait de tests croisés pour voir si cela est pratique.

Généralement, vous ne voulez pas mélanger les API tactile et non tactile (clic) par défaut. Une fois que vous entrez dans le monde du toucher, il est plus facile de traiter uniquement les fonctions liées au toucher. Voici un pseudo-code qui ferait ce que vous voulez.

Si vous vous connectez à l'événement touchmove et suivez les emplacements, vous pouvez ajouter d'autres éléments dans la fonction doTouchLogic pour détecter les gestes et ainsi de suite.

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

vérifier les boutons rapides et enregistrer les clics sur google https://developers.google.com/mobile/articles/fast_buttons

Eh bien ... Tout cela est super compliqué.

Si vous avez modernizr, c'est une évidence.

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

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

Une autre implémentation pour une meilleure maintenance. Cependant, cette technique fera également event.stopPropagation (). Le clic n'est détecté sur aucun autre élément ayant cliqué pendant 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()) {
      ...
   }
}

Juste à des fins de documentation, voici ce que j'ai fait pour le clic le plus rapide / le plus réactif sur le bureau / appuyez sur la solution mobile à laquelle je pourrais penser:

J'ai remplacé la onfonction de jQuery par une fonction modifiée qui, chaque fois que le navigateur prend en charge les événements tactiles, a remplacé tous mes événements de clic par 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'utilisation serait la même qu'avant, comme:

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

Mais il utiliserait le démarrage tactile lorsqu'il est disponible, cliquez dans le cas contraire. Aucun retard d'aucune sorte nécessaire: D

Je suis juste venu avec l'idée de mémoriser si ontouchstartjamais cela se déclenchait. Dans ce cas, nous sommes sur un appareil qui le prend en charge et voulons ignorer l' onclickévénement. Puisque ontouchstartdevrait toujours être déclenché avant onclick , j'utilise ceci:

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

Vous pouvez essayer comme ceci:

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

Dans mon cas, cela a parfaitement fonctionné:

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

Le problème principal était quand à la place mouseup j'ai essayé avec le clic, sur les appareils tactiles, déclenchait le clic et le toucher en même temps, si j'utilise le clic, certaines fonctionnalités ne fonctionnaient pas du tout sur les appareils mobiles. Le problème avec le clic est qu'il s'agit d'un événement global qui déclenche le reste de l'événement, y compris le toucher.

Cela a fonctionné pour moi, le mobile écoute les deux, alors évitez celui qui est l'événement tactile. le bureau n'écoute que la souris.

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

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

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

Étant pour moi la meilleure réponse que celle donnée par Mottie, j'essaie juste de rendre son code plus réutilisable, c'est donc ma contribution:

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

Je travaille également sur une application web Android / iPad, et il semble que si seulement "touchmove" suffit pour "déplacer des composants" (pas besoin de toucher au démarrage). En désactivant le démarrage tactile, vous pouvez utiliser .click (); de jQuery. Cela fonctionne réellement car il n'a pas été surchargé par le démarrage tactile.

Enfin, vous pouvez binb .live ("touchstart", function (e) {e.stopPropagation ();}); pour demander à l'événement Touchstart d'arrêter de se propager, le salon clique sur () pour se déclencher.

Ça a marché pour moi.

Il y a beaucoup de choses à considérer lorsque vous essayez de résoudre ce problème. La plupart des solutions interrompent le défilement ou ne gèrent pas correctement les événements de clics fantômes.

Pour une solution complète, voir https://developers.google.com/mobile/articles/fast_buttons

NB: Vous ne pouvez pas gérer les événements de clics fantômes par élément. Un clic retardé est déclenché par l'emplacement de l'écran, donc si vos événements tactiles modifient la page d'une certaine manière, l'événement click sera envoyé à la nouvelle version de la page.

Il peut être efficace de l'attribuer aux événements 'touchstart mousedown'ou 'touchend mouseup'd'éviter les effets secondaires indésirables de l'utilisation click.

Profitant du fait qu'un clic suivra toujours un événement tactile, voici ce que j'ai fait pour me débarrasser du «clic fantôme» sans avoir à utiliser de timeouts ou de drapeaux globaux.

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

Fondamentalement, chaque fois qu'un ontouchstartévénement se déclenche sur l'élément, un indicateur un ensemble, puis supprimé (et ignoré), lorsque le clic arrive.

Pourquoi ne pas utiliser l'API jQuery Event?

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

J'ai utilisé cet événement simple avec succès. Il est propre, suffisamment identifiable et suffisamment flexible pour être amélioré.

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 vous utilisez jQuery, les éléments suivants ont très bien fonctionné pour moi:

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

D'autres solutions sont également bonnes, mais je liais plusieurs événements dans une boucle et j'avais besoin de la fonction d'appel automatique pour créer une fermeture appropriée. De plus, je ne voulais pas désactiver la liaison car je voulais qu'elle puisse être invoquée au prochain clic / toucher.

Pourrait aider quelqu'un dans une situation similaire!

Pour des fonctionnalités simples, reconnaissez simplement le toucher ou cliquez sur J'utilise le code suivant:

var element = $("#element");

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

Cela renverra "toucher" si l'événement de démarrage tactile est défini et "pas de contact" sinon. Comme je l'ai dit, c'est une approche simple pour les événements click / tap.

J'essaye ceci et jusqu'ici ça marche (mais je ne suis que sur Android / Phonegap donc caveat emptor)

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

Je n'aime pas le fait que je réaffecte les gestionnaires à chaque contact, mais toutes les choses considérées ne se produisent pas très souvent (en temps d'ordinateur!)

J'ai une tonne de gestionnaires comme celui de '#keypad', donc avoir une fonction simple qui me permet de résoudre le problème sans trop de code est la raison pour laquelle je suis allé de cette façon.

Essayez d'utiliser à Virtual Mouse (vmouse) Bindingspartir de jQuery Mobile. C'est un événement virtuel spécialement pour votre cas:

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

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

Liste de support du navigateur: http://jquerymobile.com/browser-support/1.4/

ÉDITER: Mon ancienne réponse (basée sur les réponses dans ce fil) n'était pas la voie à suivre pour moi. Je voulais un sous-menu à développer lors de la saisie de la souris ou du clic tactile et de réduire le congé de la souris ou un autre clic tactile. Étant donné que les événements de souris sont normalement déclenchés après des événements tactiles, il était assez difficile d'écrire des écouteurs d'événements qui prennent en charge à la fois l'écran tactile et la souris.

Plugin jQuery: Touch Or Mouse

J'ai fini par écrire un plugin jQuery appelé " Touch Or Mouse " (897 octets minifiés) qui peut détecter si un événement a été invoqué par un écran tactile ou une souris (sans tester la prise en charge tactile!). Cela permet la prise en charge de l'écran tactile et de la souris en même temps et sépare complètement leurs événements.

De cette façon, l'OP peut utiliser touchstartou touchendpour répondre rapidement aux clics tactiles et clickpour les clics invoqués uniquement par une souris.

Manifestation

Il faut d'abord faire ie. les événements tactiles de piste de l'élément de corps:

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

Les événements de souris sont liés aux éléments par défaut et en appelant, $body.touchOrMouse('get', e)nous pouvons savoir si l'événement a été invoqué par un écran tactile ou une souris.

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

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

Voir le plugin à l'œuvre sur http://jsfiddle.net/lmeurs/uo4069nh .

Explication

1. Ce plugin doit être appelé ie. l'élément de corps à suivre touchstartet les touchendévénements, de cette façon, l' touchendévénement n'a pas à être déclenché sur l'élément déclencheur (c'est-à-dire un lien ou un bouton). Entre ces deux événements tactiles, ce plugin considère que tout événement de souris est appelé par le toucher.
2. Les événements de souris sont déclenchés uniquement après touchend, lorsqu'un événement de souris est déclenché dans ghostEventDelay(option, 1000 ms par défaut) après touchend, ce plugin considère que l'événement de souris est invoqué par le toucher.
3. Lorsque vous cliquez sur un élément à l'aide d'un écran tactile, l'élément gagne l' :activeétat. L' mouseleaveévénement n'est déclenché que lorsque l'élément perd cet état par ie. en cliquant sur un autre élément. Étant donné que cela peut se produire quelques secondes (ou minutes!) Après le mouseenterdéclenchement de l' événement, ce plugin conserve la trace du dernier mouseenterévénement d'un élément : si le dernier mouseenterévénement a été appelé au toucher, l' mouseleaveévénement suivant est également considéré comme étant appelé au toucher.

Voici un moyen simple de le faire:

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

Vous enregistrez essentiellement le premier type d'événement qui est déclenché dans la propriété 'trigger' dans l'objet de données de jQuery qui est attaché au document racine, et vous ne l'exécutez que lorsque le type d'événement est égal à la valeur dans 'trigger'. Sur les appareils tactiles, la chaîne d'événements serait probablement «touchstart» suivie de «click»; cependant, le gestionnaire «click» ne sera pas exécuté car «click» ne correspond pas au type d'événement initial enregistré dans «trigger» («touchstart»).

L'hypothèse, et je pense qu'elle est sûre, est que votre smartphone ne passera pas spontanément d'un appareil tactile à un appareil de souris ou bien le robinet ne s'enregistrera jamais car le type d'événement `` déclencheur '' n'est enregistré qu'une fois par le chargement de la page et le «clic» ne correspondraient jamais au «démarrage tactile».

Voici un codepen avec lequel vous pouvez jouer (essayez d'appuyer sur le bouton d'un appareil tactile - il ne devrait pas y avoir de retard de clic): http://codepen.io/thdoan/pen/xVVrOZ

J'ai également implémenté cela comme un simple plugin jQuery qui prend également en charge le filtrage des descendants de jQuery en passant une chaîne de sélection:

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

La meilleure méthode que j'ai trouvée consiste à écrire l'événement tactile et à faire en sorte que cet événement appelle l'événement de clic normal par programmation. De cette façon, vous avez tous vos événements de clic normaux, puis vous devez ajouter un seul gestionnaire d'événements pour tous les événements tactiles. Pour chaque nœud que vous souhaitez rendre touchable, ajoutez simplement la classe "touchable" pour invoquer le gestionnaire tactile. Avec Jquery, cela fonctionne comme ça avec une certaine logique pour s'assurer que c'est un véritable événement tactile et non un faux positif.

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