web-dev-qa-db-fra.com

jquery touchstart dans le navigateur

Comme touchstart/touchend n'est pas encore pris en charge dans la plupart des navigateurs de bureau. Comment puis-je créer un événement tactile qui sera le même que l'événement mousedown (qui est pris en charge dans tous les navigateurs).

Je veux quelque chose comme ça

$('obj').bind('touchstart', function(e){
});

sera traduit en

$('obj').bind('mousedown', function(e){
})
jquerytouch-event
18
coure2011

Vous pouvez lier les deux à la fois ...

$('obj').bind('touchstart mousedown', function(e){
});

Si vous souhaitez que mousedown événement déclenche automatiquement touchstart événements (il vous suffit donc de lier touchstart) utilisez ...

$(document).bind('mousedown', function(event) {
    $(event.target).trigger('touchstart');
});

Notez que cela signifie que les événements mousedown doivent se propager vers document avant que l'événement touchstart personnalisé puisse être déclenché. Cela pourrait avoir des effets secondaires inattendus.

26
alex

Essayez quelque chose comme ceci:

var clickEventType = ((document.ontouchstart!==null)?'click':'touchstart');

$('obj').bind(clickEventType, function(e){});

Mieux encore, utilisez .on () pour la liaison:

$('body').on(clickEventType, 'obj', function(e){});

Cela vérifie le document pour voir si le démarrage tactile existe, si c'est le cas, alors votre événement est "démarrage tactile" s'il ne l'est pas (la plupart des navigateurs de bureau) puis son "clic".

Vous pouvez également déclencher en utilisant le même type d'événement:

$('obj').trigger(clickEventType);
7
Eric Steinborn

Ce n'est pas la meilleure solution, mais la meilleure que j'ai trouvée jusqu'à présent. Chute? Cela ne fonctionne qu'après la première touche, vous ne pouvez donc pas l'utiliser de manière synchrone :(

 var isTouch = false;
 $('body').on('touchstart', function () {
    isTouch = true;
 });

Vous pouvez également vérifier si le support du navigateur touche d'abord avec modernizr par exemple.

N'oubliez pas de ne pas l'utiliser dans une portée globale (sauf si vous devez). Vous pouvez également le changer pour qu'il soit modernizr "identique" en ajoutant la classe is-touch-device à la balise Html en ajoutant après le code isTouch = true: $('html').addClass('is-touch-device'). Dans ce cas, vous pouvez le référencer de partout (à partir de CSS également).

1
Maciej Paprocki